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来展示.

请注意,这使用jQuery的切换事件处理程序,而不是同名的动画效果.

注意#2:根据文档,在jQuery 1.9中删除了toggle().(也就是说,允许您传递通过备用点击激活的多个功能的方法签名.)