javascript - jQuery切换替代方式？

Question

由于不推荐使用切换，因此我使用它来切换 div：

$("#syndicates_showmore").on("click", function () {

    if (!clicked) {
        $('#syndicates').fadeTo('slow', 0.3, function () {
            $(this).css(
            {
                'height': 'auto',
                'overflow': 'none'
            });
        }).fadeTo('slow', 1);

        setTimeout(function () {
            $("#syndicates_showmore").text("Show less");
        }, 500);

        clicked = true;
    }
    else {
        $('#syndicates').fadeTo('slow', 0.3, function () {
            $(this).css(
            {
                'height': '290px',
                'overflow': 'hidden'
            });
        }).fadeTo('slow', 1);

        setTimeout(function () {
            $("#syndicates_showmore").text("Show more");
        }, 500);

        clicked = false;
    }
});

有没有更清洁的方法来做到这一点？

Answer 1

根据jQuery 1.9 升级指南：

.toggle(function, function, ... ) 已移除

这是“单击元素以运行指定功能”的签名.toggle()。它不应与.toggle()未弃用的“更改元素的可见性”相混淆。前者被删除以减少混淆并提高库中模块化的潜力。jQuery Migrate 插件可用于恢复功能。

换句话说，你仍然可以.toggle这样使用：

var clicked = false;
$("#syndicates_showmore").on("click", function () {
    clicked = !clicked;
    var showText = "Show " + (clicked ? "more" : "less");
    $('#syndicates').toggle(function () {
        $("#syndicates_showmore").text(showText);
    });
});

Answer 2

最好的选择是使用.toggleClass()：

$("#syndicates_showmore").on("click", function () {
    $('#syndicates').toggleClass("newClass, 1000", "easeInOutBounce")
});

jQuery .toggleClass() API 文档：

描述：根据类的存在或 switch 参数的值，从匹配元素集中的每个元素中添加或删除一个或多个类。

如果与jQuery UI一起使用，您可以使用不同的缓动选项轻松地对其进行动画处理。

缓动：

缓动函数指定动画在动画中不同点的进展速度。jQuery UI 提供了几个额外的缓动函数，从摆动行为的变化到自定义效果（如弹跳）。

在线示例

Answer 3

取自jQuery API

$("#clickme" ).click(function() {
   $( "#book" ).toggle( "slow", function() {
     // Animation complete.
   });
});