イメージリサイズJquery

Question

私は4イメージの水平セットを持っています。 resize関数はmouseoverイベントで機能します。つまり、これらの画像上でマウスを非常に速く動かすか遅くすると、すべてがサイズ変更されます。このため、私は、ユーザーがマウスを少なくとも1.5秒以上画像の上に置いてから、サイズ変更を進める必要があります。これは不正なコードです：

$('a img').mouseover(function(){ 
      $(this).delay(1500).animate({ 
       width: "315px", 
       height: "225px", 
       marginLeft: "-50px" 
      }, 1500); 
     }); 
     $('a img').mouseout(function(){ 
     $(this).animate({ 
      width: "210px", 
      height: "150px", 
      marginTop: "0px", 
      marginLeft: "0px" 
     }, 500); 
     }); 

Answer 1

を私はあなたがこのためのsetTimeoutとてclearTimeoutを使用することができます.setTimeout()

$('a img').mouseover(function(){ 
     var imgElement = $(this); 
     var timeoutID = window.setTimeout(
     function(){ 
      imgElement.animate({ 
       width: "315px", 
       height: "225px", 
       marginLeft: "-50px" 
      }, 1500); 
     }, 1500); 
     imgElement.data("timeout", timeoutID); 
    }); 
    $('a img').mouseout(function(){ 
     var imgElement = $(this); 
     var timeoutID = imgElement.data("timeout"); 
     window.clearTimeout(timeoutID); 
     $(this).animate({ 
      width: "210px", 
      height: "150px", 
      marginTop: "0px", 
      marginLeft: "0px" 
     }, 500); 
    }); 

Answer 2

私はあなたが望む正確なロジックについてはわかりませんが、これを行う方法が1つあります。私は実際のアニメーションをフックアップしていませんでしたが、むしろトリガーするときにあなたを示しています。

HTML：

<div class="container"> 
<img src="http://photos.smugmug.com/photos/227688911_f5X9o-Ti.jpg" border="0"> 
<img src="http://photos.smugmug.com/photos/231469043_zkRUp-Ti.jpg" border="0"> 
<img src="http://photos.smugmug.com/photos/227688911_f5X9o-Ti.jpg" border="0"> 
<img src="http://photos.smugmug.com/photos/231469043_zkRUp-Ti.jpg" border="0"> 
<img src="http://photos.smugmug.com/photos/227688911_f5X9o-Ti.jpg" border="0"> 
</div> 
<div id="result"> 
</div> 

JS：マウスは念mouseleaveでアニメーションを焼成前iamgesの上にまだあった場合、これはチェックすることによって、ほんの少し、より確実な作ることができる

(function() { 

    var myTimer = null; 

    function animate() { 
     $("#result").append("go, "); 
    } 

    $(".container").mouseenter(function() { 
     if (!myTimer) { 
      myTimer = setTimeout(function() { 
       myTimer = null; 
       animate(); 
      }, 1500); 
     } 
    }); 
    $(".container").mouseleave(function(){ 
     if (myTimer) { 
      clearTimeout(myTimer); 
      myTimer = null; 
     } 
    }); 
}()); 

イベントは何とか見逃されました。あなたがここにアクションでそれを見ることができ

：http://jsfiddle.net/jfriend00/9q36R/

Answer 3

を使用します。

も.hover()はにjQueryのでショートカットメソッドですmouseOverとmouseOutを同時に処理します。

var TimeoutHandler = 0; 
var ImageToAnimate = null; 

function AnimationIn() 
{ 
    // animate ImageToAnimate 
} 

function AnimationOut(image) 
{ 
    // animate image 
} 

$('a img').hover(function() 
{ 
    clearTimeout(TimeoutHandler); 
    ImageToAnimate = this; 
    TimeoutHandler = setTimeout(AnimationIn, 1500); 
}, function() 
{ 
    AnimationOut(this); 
});