[英]jQuery reversing animation on second click
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;
});
The easiest way to handle this would be to use jQuery toggle. 处理这个的最简单方法是使用jQuery切换。 This allows you to activate two functions on alternate clicks.
这允许您通过备用点击激活两个功能。
$('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. 注意#2:根据文档,在jQuery 1.9中删除了toggle()。 (That is, the method signature that allowed you to pass multiple functions which were activated on alternate clicks.)
(也就是说,允许您传递通过备用点击激活的多个功能的方法签名。)
First of all you are missing a . 首先,你错过了一个。 in the addClass line.
在addClass行中。 This is the correct version: $('a.contact').addClass('open');
这是正确的版本:$('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/
$('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;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.