Javascript 第二次单击时 jQuery 反转动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2132090/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery reversing animation on second click
提问by Udders
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.
我有一个 div 元素，在点击事件时，一个链接滑入。这很好用，除了我现在试图获取它，以便如果第二次点击链接，动画会反转到其原始状态。
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;
});
回答by John McCollum
The easiest way to handle this would be to use jQuery toggle. This allows you to activate two functions on alternate clicks.
处理此问题的最简单方法是使用 jQuery 切换。这允许您在交替点击时激活两个功能。
$('a.contact').toggle(
function(){
// odd clicks
},
function(){
// even clicks
});
...And a quick jsFiddle to demonstrate.
...还有一个快速的jsFiddle 来演示。
Note that this uses jQuery's toggle event handler, not the animation effect of the same name.
请注意，这里使用的是jQuery 的切换事件处理程序，而不是同名的动画效果。
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.)
注意#2：根据文档，在jQuery 1.9 中删除了toggle()。（即，允许您传递在交替单击时激活的多个功能的方法签名。）
回答by EmKay
First of all you are missing a . in the addClass line. This is the correct version: $('a.contact').addClass('open');
首先，您缺少一个 . 在 addClass 行中。这是正确的版本： $('a.contact').addClass('open');
Anyway, I would do like this:
无论如何，我会这样做：
// Bind the click event with the live function
$('a.contact:not(.open)').live('click', function() {
// Animate box as wanted and add a class to indicate that the box is open.
// ... Code to animate goes here ...
$(this).addClass('open');
});
$('a.open').live('click', function() {
// Reverse animation and remove class
// ... Code to reverse animation goes here ...
$(this).removeClass('open');
});
The reason that you need to bind with the live function is that the class "open" is not added to any elements when the regular .click() binding takes place.
您需要与 live 函数绑定的原因是当常规 .click() 绑定发生时，类“open”不会添加到任何元素。
Read about the live method here: http://api.jquery.com/live/
在此处阅读实时方法：http: //api.jquery.com/live/
回答by andres descalzo
$('a.contact').click(function(e) {
e.stopPropagation();
var dir = '';
if ($(this).hasclass('to-left'))
{
dir = 'to-rigth';
$(this).removeClass('to-left');
}
else //ini or has class to rigth
{
dir = 'to-left';
$(this).removeClass('to-rigth');
}
dir = $(this).addclass(dir);
if (dir=='to-left')
{
//you code to left
}
else
{
//you code to rigth
}
return false;
});
