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 Upgrade Guide：

.toggle（功能，功能，...）已删除

这是“点击运行指定函数的元素”签名.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 Documentation ：

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

如果与jQuery UI一起使用，您可以使用不同的缓动选项轻松为其设置动画。

Easings:

缓动功能指定动画进展的速度动画中的不同点。 jQuery UI提供了几个附加功能缓和功能，从挥杆行为的变化到定制效果，如弹跳。

Example online

Answer 3

取自jQuery API

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

jQuery切换替代方式？

3 个答案: