Keep Coding ， Kevin Coder

紀錄如何使用animate、stop、delay的使用方式。

 

animate()

讓css效果的改變採漸進式的方式呈現

$('.animate').mouseenter(function(e){
  $(this).animate({'width':'200px'},1000);
});
$('.animate').mouseout(function(e){
  $(this).animate({'width':'100px'},1000);
});

當滑鼠移入帶有.animate的class時候，寬度變成200px，且在1000毫秒完成。

當滑鼠移開帶有.animate的class時候，寬度變成100px，且在1000毫秒完成。

1000毫秒 ＝1秒

另外這功能應該是針對能夠漸進式的內容，例如寬度、距離視窗頂端。例如ainmate({'color':'''red'})，完全沒有任何效果。

---

stop()

暫停上一個正在執行動作。如上一個範例，當滑鼠的不斷移出移入會讓寬度不斷的從100px --> 200px 來回，移出移入幾次那jQuery就會執行幾次。

為避免此情況發生，在執行animate()前加上stop可停止上一個執行的動作。

$('.animate-stop').mouseenter(function(e){
  $(this).stop().animate({'width':'200px'},500);
});

$('.animate-stop').mouseout(function(e){
  $(this).stop().animate({'width':'100px'},500);
});

 

---

delay(毫秒)

執行前延遲多久，使效果不會這麼突兀。

$('.animate-delay').mouseenter(function(e){
  $(this).stop().delay(1000).animate({'width':'200px'});
});
$('.animate-delay').mouseout(function(e){
  $(this).stop().delay(1000).animate({'width':'100px'});
});

 

codePen範例：https://codepen.io/Kevin0711/pen/KmdMOZ/