jQuery函数

Question

我是jQuery的新手,但我设法得到了一些工作.我唯一无法弄清楚的是如何创建这个脚本的功能,以便我可以在几个div上重用它.

这个想法是有一个tumbnail,当你徘徊在tumbnail时,一个infolayer会在tumbnail上褪色.当鼠标离开tumbnail时,信息图层将再次消失.

我有以下代码:

$('#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 ();