изображение Увеличить Уменьшить Animation В JS

ИТАК я помещаю в образ, который OnClick изменяет размер (уходит больше, а затем OnClick возвращается в оригинальный размер)изображение Увеличить Уменьшить Animation В JS

Я сделал это с помощью JS, но я не могу показаться, чтобы впутать анимация в промежутке между размерами, я хочу, чтобы она заметно увеличивалась, а не расширялась до размера, а не просто щелкнула между двумя экземплярами.

Heres кодирование:

 <script type="text/javascript"> 
<!-- 
var flag = true; 
function resize() { 
    if(flag) { 
     document.getElementById("img1").style.width = "50px"; 
    } else { 
     document.getElementById("img1").style.width = "280px"; 
    } 
    (flag)?flag=false:flag=true; 
} 
//--> 
</script> 

<body onload="resize();"> 
<img id="img1" src="../images/attachicona.png" border="0" onClick="resize();" />

источник

2013-05-28 mrmason

Может использоваться JQuery? –

При использовании JQuery

var flag = true; 
$('#img1').click(function(e){ 
    if(flag) 
     $(e.target).animate({width:'50px'}, 150, function(){ 
      //do stuff after animation 
     }); 

    else 
     $(e.target).animate({width:'280px'}, 150, function(){ 
      //do stuff after animation 
     }); 
    flag=!flag; 
});

источник

2013-05-28 14:34:51 Zesar

Хмммм Кант, похоже, это работает, это на jsfiddle? – mrmason

– Zesar

Вы можете использовать CSS3 переходы, чтобы сделать тот же эффект. Нет необходимости Javascript или JQuery - css3 animation/transition/transform: How to make image grow?

Или вы можете использовать JQuery анимации - http://forum.jquery.com/topic/image-resize-animation

источник

2013-05-28 14:26:32

Я знаю, что собирался это сделать, но он не работает для мобильных устройств, эффект зависания остается. Я хочу, чтобы можно было переключать переход с помощью клика, а не зависания. Cheers – mrmason

Вы можете попробовать анимацию jquery. Довольно проста в использовании. (см. обновленный ответ) –

изображение Увеличить Уменьшить Animation В JS

ответ

Смежные вопросы