Изменение размера изображения JQuery

Question

У меня горизонтальный набор из 4 изображений. Функция изменения размера работает при событии 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()

$('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

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

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:

(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; 
     } 
    }); 
}()); 

Это можно было бы сделать чуть-чуть более надежными, проверяя, если мышь была еще над iamges перед обжигом анимации только в том случае, MouseLeave событие каким-то образом было пропущено.

Вы можете увидеть его в действии здесь: http://jsfiddle.net/jfriend00/9q36R/

Answer 3

вы можете использовать SetTimeout и clearTimeout для этого:

также .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); 
});