Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.07.2013, 16:45
Аспирант
Отправить личное сообщение для Esigns Посмотреть профиль Найти все сообщения от Esigns
 
Регистрация: 27.09.2012
Сообщений: 62

Увеличить картинку
В анимация не разбираюсь абсолютно, надеюсь форумчане помогут.
Есть картинка кнопка которую нужно величить при старте, скажем с
width 30px и height 30px до width 160px и height 160px
Использую следующий код:
$('.container').css({'width': '30px', 'height': '30px', 'display':'none', 'left':'50%', 'margin-left':'-15px'}).fadeIn(400, function() {
            $(this).animate({'height':162, 'width':162, 'top': 460, 'left':355}, 1000, 'swing');
        });

Проблема в том что эта круглая кнопка должна плавно увеличиваться как бы из центра. Так и получается но в конце все время едет либо чуть уверь либо влево и тд.
Есть ли у вас какая то формула или рабочий код или идея для подобного увеличения изображения?
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 31.07.2013, 16:47
Аспирант
Отправить личное сообщение для Esigns Посмотреть профиль Найти все сообщения от Esigns
 
Регистрация: 27.09.2012
Сообщений: 62

Или это метод не одновременно увеличивает различные параметры?
Ширина высота и top left ?
Ответить с цитированием
  #3 (permalink)  
Старый 31.07.2013, 17:07
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

можно так http://codepen.io/animhotep/pen/HiLAG
Ответить с цитированием
  #4 (permalink)  
Старый 31.07.2013, 17:22
Аспирант
Отправить личное сообщение для Esigns Посмотреть профиль Найти все сообщения от Esigns
 
Регистрация: 27.09.2012
Сообщений: 62

Спасибо. Сейчас попробую
Ответить с цитированием
  #5 (permalink)  
Старый 31.07.2013, 18:04
Аспирант
Отправить личное сообщение для Esigns Посмотреть профиль Найти все сообщения от Esigns
 
Регистрация: 27.09.2012
Сообщений: 62

css transfrom scale помогло - дает увеличение из центра

animhotep
к сожалению ваш способ это увеличение ширины и высоты.
А нужно увеличивать ширину и высоту и топ лефт для создания эффекта увеличения из цента. Что-то вроде
w = h = w + 2;
top += 1;
width +=1;
Правда код выше почему то работал не так как нужно, хз почему.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фоновую картинку поменять. Jurasmi Элементы интерфейса 11 08.10.2012 15:25
Как правильно забрать картинку с сервера? Serh AJAX и COMET 4 30.07.2012 14:05
Показать и спрятать картинку martinss Events/DOM/Window 2 02.04.2011 20:34
С помощью JS добавить к ссылкам картинку в CSS wlad2 Элементы интерфейса 7 16.10.2010 23:44
Как передать картинку из javascript в php KIVagant AJAX и COMET 3 12.05.2010 11:54