javascript - 第二次点击时jQuery反转动画

Question

我有一个 div 元素，在单击事件时，一个链接滑入。这很好用，除了我现在试图获取它，以便如果第二次单击该链接，动画将反转到其原始状态。

我曾尝试向链接添加一个类，但当动画运行时，它最终会执行相同的动画但向后。

    $('a.contact').click(function() {
        $('#contact').animate({marginLeft:'500px'}, {queue:false, duration:'7000'});
        $('#contact').animate({width:'500px'}, {duration:'7000'});
        $('a.contact').css()
        $('a.contact').animate({marginLeft:'-500px'}, '250');
        $('a.contact')addClass('open');
    return false;
});

Answer 1

处理此问题的最简单方法是使用 jQuery 切换。这允许您在交替点击时激活两个功能。

$('a.contact').toggle(
function(){
    // odd clicks
},
function(){
    // even clicks
});

...然后快速jsFiddle to demonstrate .

请注意，这使用了 jQuery's toggle event handler ，不是同名动画效果。

注意#2:根据文档，toggle() 在 jQuery 1.9 中被移除。 (也就是说，允许您传递多个功能的方法签名，这些功能在交替点击时被激活。)