jQuery .click .animate 向下移动，然后再向上移动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4215789/
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 .click .animate to move down, then back up
提问by Caius Eugene
So far I managed to make it so it moves down on a click in increments of 120, but I want it to go up and down, not down and down... I hope I've explained this so "someone" will understand.
到目前为止，我设法让它以 120 为增量在单击时向下移动，但我希望它上下移动，而不是上下移动……我希望我已经解释了这一点，以便“某人”能够理解。
<script>
$(document).ready(function() {
$('#footertab').click(function() {
$('#footer').animate({
bottom: '-=120'
}, 1000, function() {
// Animation complete.
});
});
});
</script>
回答by Simon
If I get this right, you're looking to toggle the position of the footer. This can be done with the .toggle()-function:
如果我做对了，您就希望切换页脚的位置。这可以通过 .toggle() 函数来完成：
$(document).ready(function() {
$('#footertab').toggle(function() {
$('#footer').animate({
bottom: '-=120'
}, 1000);
},function() {
$('#footer').animate({
bottom: '+=120'
}, 1000);
})
});
回答by Nick Craver
You can use .toggle()for this:
您可以.toggle()为此使用：
$(function() { //shortcut for $(document).ready(function() {
$('#footertab').toggle(function() {
$('#footer').animate({ bottom: '-=120' }, 1000);
}, function() {
$('#footer').animate({ bottom: '+=120' }, 1000);
});
});
By using .toggle(), every clickevent toggles between running the -=and +=animations. Also note there's no need to include the animation callback if it doesn't do anything, just leave it off.
通过使用.toggle()，每个click事件在运行-=和+=动画之间切换。另请注意，如果不执行任何操作，则无需包含动画回调，只需将其关闭即可。
回答by grant
It sounds like slideToggle() http://api.jquery.com/slideToggle/might work for you.
这听起来像 slideToggle() http://api.jquery.com/slideToggle/可能对你有用。
回答by AndreKR
<script>
$(document).ready(function() {
$('#footertab').toggle(
function() {
$('#footer').animate({
bottom: '-=120'
}, 1000, function() {
// Animation complete.
});
},
function() {
$('#footer').animate({
bottom: '+=120'
}, 1000, function() {
// Animation complete.
});
},
);
});
</script>
