第二次单击时jQuery反转动画 [英] jQuery reversing animation on second click

问题描述

我有一个div元素，该元素在单击事件时会滑入.这很好用，但是我现在试图获取它，以便如果第二次单击该链接，动画将恢复为原始状态.

I have a div element, that on click event, a link slides in. This works great, except I am now trying to get it so that if the link is clicked a second time, the animation reverses to its original state.

我试图在链接中添加一个类，但是当动画运行时，它最终会执行相同的动画，但是向后.

I have tried to add a class to the link, but when the animation runs it ends up doing the same animation but backwards.

    $('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;
});

推荐答案

最简单的方法是使用jQuery切换.这样一来，您就可以在交替点击时激活两个功能.

The easiest way to handle this would be to use jQuery toggle. This allows you to activate two functions on alternate clicks.

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

...然后快速 jsFiddle进行演示.

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

Note that this uses jQuery's toggle event handler, not the animation effect of the same name.

注#2:根据文档，在jQuery 1.9中已删除toggle(). (也就是说，该方法签名使您可以传递通过交替点击激活的多个功能.)

Note #2: As per the documentation, toggle() was removed in jQuery 1.9. (That is, the method signature that allowed you to pass multiple functions which were activated on alternate clicks.)

这篇关于第二次单击时jQuery反转动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！