jQuery关闭和事件函数（mouseover，mouseout，...）

Question

我试图让我的头了解如何使用与jQuery事件函数有关的闭包。

我目前的问题是圆形在屏幕上的形状，使他们停下来，在鼠标悬停和淡入淡出，并重新开始鼠标。我必须使用imagemaps来创建一个圆形的鼠标悬停敏感区域。虽然动画工作正常，但我很难在鼠标悬停功能上使用闭包，因为我希望它是。

鉴于此设置：

(function($){ 
    $.fn.xyz = function(option) { 
    // override defaults with specified option 
    option = $.extend({}, $.fn.xyz.option, option); 

    return this.each(function(index, element) { 
      // run works fine. 
      function run(index) { 
       $(".ball:eq(" + index + ")").css({top: 500).startAnimation({ top: -500}, 1000, "linear", (function (i) { 
        return function() { 
         run(i); 
       }})(index)); 
      } 

      //1 this version works great but I don't like the .parent().parent() especially as the animation requires 
      // just the ball I hover over gets the opacity assigned 
      $("area").mouseover(
       function() {$(this).parent().parent().css('opacity', 0.5);} 
      ); 

      //2 this version makes all balls transparent on page load 
      $("area").mouseover(
       (function (activeElement) { 
        $(activeElement).css('opacity', 0.5); 
       })(this) 
      ); 

      //3 this version makes all balls transparent on the first mouse over event 
      $("area").mouseover(
       (function (activeElement) { 
        return function() { 
         $(activeElement).css('opacity', 0.5); 
        } 
       })(this) 
      ); 

      //4 also this version affecs all balls and not just the one that is mouse overed 
      var activeBall = $(this); 
      $("area").mouseover(function() { 
       $(activeBall).css('opacity', 0.5); 
      }).mouseout(function() { 
       $(activeBall).css('opacity', 1); 
      }); 

      run(index); 
     }); 
    }, 

    $.fn.xyz.option = {}; 
})(jQuery); 

为什么版本2，3和4的目标的所有元素，而不只是它正在积极上空盘旋之一。我将如何利用闭包来避免使用索引或类似的解决方法？

非常感谢！

Answer 1

你让它成为一个自我调用匿名函数。基本上，用jQuery对象自动调用它。你还包装了功能......我没有得到。这应该工作：

(function($){ 
    $.fn.xyz = function(option) { 
    // override defaults with specified option 
    option = $.extend({}, $.fn.xyz.option, option); 

    return this.each(function(index, element) { 
      // run works fine. 
      function run(index) { 
       $(".ball:eq(" + index + ")").css({top: 500).startAnimation({ top: -500}, 1000, "linear", (function (i) { 
        return function() { 
         run(i); 
       }})(index)); 
      } 

      //1 this version works great but I don't like the .parent().parent() especially as the animation requires 
      // just the ball I hover over gets the opacity assigned 
      $("area").mouseover(
       function() {$(this).parent().parent().css('opacity', 0.5);} 
      ); 

      //2 this version makes all balls transparent on page load 
      $("area").mouseover(
       (function (activeElement) { 
        $(activeElement).css('opacity', 0.5); 
       }) 
      ); 

      //3 this version makes all balls transparent on the first mouse over event 
      $("area").mouseover(
       (function (activeElement) { 
        return function() { 
         $(activeElement).css('opacity', 0.5); 
        } 
       }) 
      ); 

      //4 also this version affecs all balls and not just the one that is mouse overed 
      var activeBall = $(this); 
      $("area").mouseover(function() { 
       $(activeBall).css('opacity', 0.5); 
      }).mouseout(function() { 
       $(activeBall).css('opacity', 1); 
      }); 

      run(index); 
     }); 
    }, 

    $.fn.xyz.option = {}; 
})(jQuery); 

基本上，SIAF正在做这样的事情：

(function(txt) { alert(txt); })('Hello world!');

声明一个匿名函数（它没有名字），它接受一个参数，然后用最后用括号括起来，你叫它，并且元素中有什么是函数的参数。

所以，当你说

 (function (activeElement) { 
      return function() { 
       $(activeElement).css('opacity', 0.5); 
      } 
     })(this) 

编译器锯“激活与此对象作为参数的函数”。看到这将如何将您的声明函数外部引用到jQuery对象，jQuery将其视为“使用.css函数更改所有元素”。