jQueryのanimateを使って、簡単な画像拡大の動きの検証をしてみます。

3つの動作

animateを指定する際に、stop()を指定することで、動きを制御出来ます。

.animateのみ

stop()を記述しない場合は命令の実行の回数分、動作します。
例えば、連続してマウスオーバーすると回数分命令が実行されます。

stop().animate

stop()を記述すると、命令が実行中に他の行動に移った場合、すぐに動作が止まります。

stop(true , true).animate

stop(true , true)を記述すると、命令が実行中に他の行動に移った場合、実行中の命令の途中段階を切り上げ、命令の最後の動作をします。

サンプル

サンプルはこちら

一応Javascriptソース

[sourcecode language=’javascript’]
$(function(){

var everM = $(“.everMove li”);
var stopM = $(“.stopMove li”);
var endM = $(“.endMove li”);

var listImg = $(“ul li img”);
var imgWidth = listImg.width();
var imgHeight = listImg.height();

//img要素の幅・高さをcssで半分に指定
listImg.css({
width : imgWidth/2,
height : imgHeight/2
});

//クラスeverMoveのli要素にhoverした時の動作を指定
everM.hover(function(){
$(“img” , this).animate({
width : imgWidth,
height : imgHeight
}, 500 );
},
function(){
$(“img” , this).animate({
width : imgWidth/2,
height : imgHeight/2
}, 500 );
});

//クラスstopMoveのli要素にhoverした時の動作を指定
stopM.hover(function(){
$(“img” , this).stop().animate({
width : imgWidth,
height : imgHeight
}, 500 );
},
function(){
$(“img” , this).stop().animate({
width : imgWidth/2,
height : imgHeight/2
}, 500 );
});

//クラスendMoveのli要素にhoverした時の動作を指定
endM.hover(function(){
$(“img” , this).stop(true , true).animate({
width : imgWidth,
height : imgHeight
}, 500 );
},
function(){
$(“img” , this).stop(true , true).animate({
width : imgWidth/2,
height : imgHeight/2
}, 500 );
});

});
[/sourcecode]

1. Web-Parkのホーム > 
2. Javascript > 
3. jQueryのanimateの動きを検証