jQuery 函数

Question

我是 jQuery 新手，但我设法让一些东西正常工作。我唯一不明白的是如何创建这个脚本的函数，以便我可以在多个 div 上重用它。

这个想法是有一个缩略图，当您将鼠标悬停在缩略图上时，信息层将淡入缩略图上。当鼠标离开缩略图时，信息层将再次消失。

我有以下代码:

$('#hover').mouseenter(function() {
    $('#1').animate({ opacity: 'show' }, 300);

    }).mouseleave(function() {
    $('#1').animate({ opacity: 'hide' }, 800);
});

和 html:

<div class="work_tumb" id="hover">
       <div class="work_overlay" id="1">This is the info overlay</div>
</div>

这段代码完美运行。现在我只想从中创建一个函数，以便它可以重用。你们能帮我解决这个问题吗？

Answer 1

我会创建一个像这样的小函数

(function($){
   $.fn.MyFader = function()
   {

      $(this).hover(in,out);
      function in()
      {
          $(this).animate({ opacity: 'show' }, 300);
      }
      function out()
      {
          $(this).animate({ opacity: 'hide' }, 800);
      }
      return this;
   }
})($ || jQuery)

然后你就可以像这样使用:

$("#1").MyFader();
$("#3").MyFader();
$(".someClass").MyFader ();