用於動畫腳本的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; 

});