用于动画脚本的jQuery 1.9切换功能

Question

我已经使用了这个脚本很久了，而且我几乎不擅长jQuery，所以当我看到这个从jQuery的v.1.9x中删除时，我无法找到一个对我来说有意义的修复（除了添加migrate插件修复它但增加了很多脚本）。任何帮助将不胜感激，所以我可以学习如何复制这种行为。谢谢！

$(document).ready(function() { 
$("#switcher-wrapper .toggle").toggle(function() { 
    $("#switcher-wrapper").animate({ 
     left: "-1px" 
    }); 
    $(this).addClass("selected"); 
    return false; 
}, function() { 
    $("#switcher-wrapper").animate({ 
     left: "-242px" 
    }); 
    $(this).removeClass("selected"); 
    return false; 
}); 

}）;

这工作在1.8.3，但奇怪的东西在1.9 jQuery。

Answer 1

这就是为什么不需要基于事件的.toggle()一个很好的例子，并且实际上导致复制因为两个切换的函数是分开的。

• 该元素已经有一个“选定”属性，因此不需要基于事件的.toggle()方法的内部状态管理。旧的代码有两种状态指示不同步的风险，这是很常见的事情。
• 事件位于包装器下方的.toggle元素中，因此它将在包装器上安装委托事件（除非您要删除包装器并在某处重写它）才有意义。
• 它可能会使代码更易于使用e.delegateTarget而不是重新指定包装器元素。委托目标是当前处理委托点击事件的元素，而不是被点击的最内层的目标。
• 在.toggle元素上快速C may可能会导致它在一段时间内来回跳动。 .stop()可以帮助防止。

```

$("#switcher-wrapper").on("click", ".toggle", function (e) { 
    var selected = $(this).hasClass("selected"); 
    $(e.delegateTarget).stop().animate({ 
     left: selected? "-242px" : "-1px" 
    }); 
    $(this).toggleClass("selected", !selected); 
}); 

```

http://jsfiddle.net/KmYES/

Answer 2

切换已经从1.9（see here）

删除不喜欢这个：

$("body").on('click', '#switcher-wrapper .toggle' function() { 

    if($(this).hasClass('selected')) { 

     $("#switcher-wrapper").animate({ 
      left: "-242px" 
     }); 
     $(this).removeClass("selected"); 

    } else { 

     $("#switcher-wrapper").animate({ 
      left: "-1px" 
     }); 
     $(this).addClass("selected"); 

    } 
    return false; 

});