Javascript Jquery - 上下动画和图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11537153/
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 - animate and image up and down
提问by holian
I'm trying to animate and image up and then down with jquery.
我正在尝试使用 jquery 上下动画和图像。
It should behave like this:
它的行为应该是这样的：
When the page loads it shows 50% of the image. If someone clicks on the image it then animates the div up the page. If the user click again it moves back down the page.
当页面加载时，它会显示 50% 的图像。如果有人点击图像，它就会使页面上的 div 动画化。如果用户再次单击它会向下移动页面。
html
html
<div id="slidebottom" class="slide">
<div class="inner"><img src="images/sze.jpg" alt="" class="try" /></div>
</div>
jquery
查询
$(document).ready(function() {
$('.try').click(function() {
$(".inner").animate({
top: '-=100px'
}, 2000);
});
});
I need help, how to reverse the animation after click two. (At the moment every time I click, the container moves up)
我需要帮助，单击两次后如何反转动画。（此时我每次点击时，容器都会向上移动）
Thank you masters
谢谢各位大师
回答by Inkbug
You can try using the .toggle()method, which takes two functions and alternates between executing each one of them on click:
您可以尝试使用该.toggle()方法，该方法采用两个函数，并在单击时交替执行每个函数：
$(document).ready(function(){
$('.try').toggle(function() {
$(".inner").animate({top: '-=100px'}, 2000);
}, function() {
$(".inner").animate({top: '+=100px'}, 2000);
});
});
However, I personally would use a class and CSS3 Transitions.
但是，我个人会使用类和 CSS3 过渡。
回答by menislici
Try this example. Also note that in order to use the topcss property you should either position: relatve;or position: absolutethe .innerdiv.
试试这个例子。还要注意的是，为了使用topCSS属性，你要么position: relatve;或position: absolute的.inner股利。
var clicked = false
$('.try').click(function () {
if (clicked == true) {
$(".inner").animate({
top: '0px'
}, 2000);
clicked = false;
} else {
$(".inner").animate({
top: '-100px'
}, 2000);
clicked = true;
}
});?
回答by BanjoMike
Just put another code line underneath the first and it will animate them in order
只需在第一个代码行下方放置另一行代码，它就会按顺序对它们进行动画处理
$(document).ready(function() {
$('.try').click(function() {
$(".inner").animate({
top: '-=100px'
}, 2000);
$(".inner").animate({
top: '+=100px'
}, 2000);
});
});
