DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> JQuery實現鼠標移動圖片顯示描述層的方法
JQuery實現鼠標移動圖片顯示描述層的方法
編輯:JavaScript綜合知識     

   本文實例講述了JQuery實現鼠標移動圖片顯示描述層的方法。分享給大家供大家參考。具體如下:

  這裡可結合 JQuery easing 的動畫來配合使用。

  主要代碼如下:

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 $(".item").hover( function() { //$(this).children("img").stop().animate({opacity: 0.8}, 700, "easeInSine"); $(this).children("div.title").stop().animate({top: 0}, 700, "easeOutBounce"); $(this).children("div.desc").stop().animate({bottom: 0}, 700, "easeOutBounce"); }, function(){ //$(this).children("img").stop().animate({opacity: 1}, 700); $(this).children("div.title").stop().animate({top: -60}, 500); $(this).children("div.desc").stop().animate({bottom: -40}, 400); } );

  希望本文所述對大家的jQuery程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved