Question

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

继承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);
});

感谢

Answer 1

这就是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);
});

Answer 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() method来存储针对被点击元素的布尔值。

jquery切换两个动画

2 个答案: