jQuery的加入懸停動畫

我有進出在連續的循環使用此代碼動畫一個div：jQuery的加入懸停動畫

$(document).ready(function() { 
setInterval(function() { 
    $("#possum-animate").animate({ 
    bottom:"32" 
    }, 3000).delay(10000).animate({ 
    bottom:"-70" 
    }, 3000).delay(10000); 
}, 10000); 
});

我如何添加一個懸停功能，因此，如果您將鼠標懸停在div它完成動畫顯示，然後當您將鼠標懸停在外時隱藏div並再次啓動連續循環。

來源

2013-04-22 binga30

你檢查這個環節呢？ http://api.jquery.com/mouseout/ – Tanmay 2013-04-22 04:53:28

你可以做這樣的事情

 $(document).ready(function() { 

    function timeFunction(){ 

     var timeInterval = setInterval(function() {   

     $("#possum-animate").animate({ 

     bottom:"32" 

    }, 3000).delay(10000).animate({ 

     bottom:"-70" 

    }, 3000).delay(10000); 

    }, 10000);  

return timeInterval; 

} 

// Start animating on page load 

var timeInterval = timeFunction(); 

$("#possum-animate").bind({ 

    mouseenter: function(e){ 

     e.preventDefault(); 

     clearTimeout(timeInterval); 
     $("#possum-animate").clearQueue(); 
     $("#possum-animate").stop(); 

    }, 

    mouseleave: function(e){ 

     e.preventDefault(); 

     timeInterval = timeFunction(); 

    } 

}); 

});

來源

2013-04-22 05:38:44

謝謝你Sajjad。這與我的原始代碼具有相同的作用，它應該在懸停時執行什麼操作？ – binga30 2013-04-22 06:02:48

當鼠標懸停並在鼠標離開div時重新啓動它時，它會停止連續循環。現在你在mouseenter函數中做任何你想做的事情。 – 2013-04-22 17:08:59

如果你想停止懸停動畫，然後使用這個 $（「＃possum-animate」）。clearQueue（）; $（「＃裝死 - 動畫」）停止（）; – 2013-04-22 17:16:54

嘗試

$(document).ready(function() { 
    var flag = true; 
    setInterval(function() { 
       if (flag) { 
        $("#possum-animate").animate({ 
           bottom : "32" 
          }, 3000).delay(10000).queue(function() { 
           $("#possum-animate").animate({ 
              bottom : "-70" 
             }, 3000) 
          }); 
       } 
      }, 10000); 

    $("#possum-animate").hover(function() { 
       flag = false; 
       $(this).stop().animate({ 
          bottom : "32" 
         }, 3000); 
      }, function() { 
       $(this).stop().animate({ 
          bottom : "-70" 
         }, 3000); 
       flag = true; 
      }); 
});

來源

2013-04-22 04:54:34

非常接近，它會在懸停時啓動動畫，如果您將鼠標懸停在外，則會停止，但是一旦您將鼠標懸停在外，該div就會動態顯示其狀態並停留在此處。 – binga30 2013-04-22 05:09:26

嘗試http://jsfiddle.net/arunpjohny/R6agk/1/ – 2013-04-22 05:12:04

也就是同樣的行爲，它似乎在您懸停時再次運行動畫。謝謝你的幫助 – binga30 2013-04-22 05:13:43

jQuery的加入懸停動畫

回答

相關問題