0

基本上，每次单击按钮时，我都会尝试在两种不同的单击功能之间切换。

继承人的jQuery代码：

$("button").click(function () {
    $("#sidebar").animate({ width: '0px' }, 250, function() {
            $(this).hide();
         });
    $("#tabs_container").animate({
        width: "100%"
    }, 500);
    $("#tabs_container ul.tabs li a").animate({
        width: "247px"
    }, 500);
    $("#myElement_wrapper").animate({
        width: "970px"
    }, 500);
});
$("button").click(function(){
    $("#sidebar").show().animate({
        width: "219px"
    }, 500);
    $("#tabs_container").animate({
        width: "781px"
    }, 500);
    $("#tabs_container ul.tabs li a").animate({
        width: "190px"
    }, 500);
    $("#myElement_wrapper").animate({
        width: "720px"
    }, 500);
});

谢谢

4

2 回答 2

2

这toggle就是为了。将您创建的这两个函数传递给它：

$("button").toggle(function () {
    $("#sidebar").animate({ width: '0px' }, 250, function() {
       $(this).hide();
    });
    // the rest of your first animation sequence
}, function () {
    $("#sidebar").show().animate({
        width: "219px"
    }, 500);
    // the rest of your second animation sequence
});

您还应该考虑缓存您的选择器...

如果您使用的是 jQuery 1.9+，则必须保留自己的标志：

$("button").click(function () {
    var toggle = $.data(this, 'clickToggle');

    if ( toggle ) {
        // your first animation sequence
    } else {
        // your second animation sequence
    }

    $.data(this, 'clickToggle', ! toggle);
});
于 2013-01-20T04:59:15.087 回答
2

您可以设置一个标志来记住元素当前是在“奇数”还是“偶数”点击：

$("button").click(function() {
    var $this = $(this),
        flag = $this.data("clickflag");
    if (!flag) {
        // first code here
    } else {
        // second code here
    }
    $this.data("clickflag", !flag);
});

演示：http: //jsfiddle.net/KHLdr/

这使用 jQuery 的.data()方法来针对单击的元素存储一个布尔值。

于 2013-01-20T05:06:12.930 回答