动画单击切换
动画单击切换
提问于 2013-05-14 19:13:08
当我单击(在示例中单击切换)时，我为div设置了动画效果。当我再次单击时，.I想要设置动画到初始位置。(我尝试使用一个变量和一个if，它不起作用。也许还有另一种更简单的方法？或者有什么错误？)
请在此处检查您的答案：http://jsfiddle.net/uXVxH/2/
HTML：
<div id="logo"></div>CSS：
#logo {
position:fixed;
bottom:-40px;left: 5%;
width:70px; height:80px;
background:blue;
cursor:pointer;
}JQUERY：
$(function(){
/* CLICK simple
$("#logo").click(function() {
$("#logo").animate({bottom: "0"}, 1200)
});
*/
/*click toggle ?*/
var hidden = true;
$("#logo").click(function() {
if (hidden) {
$("#logo").animate({bottom: "0"}, 1200);
} else {
$("#logo").animate({bottom: "-40"}, 1200);
}
state = !hidden;
});
})回答 3
Stack Overflow用户
回答已采纳
发布于 2013-05-14 19:21:53
您的示例正在运行，但是您在更改hidden变量的state时犯了一个小错误。
var hidden = true;
$("#logo").click(function() {
if (hidden) {
$("#logo").animate({bottom: "0"}, 1200);
} else {
$("#logo").animate({bottom: "-40"}, 1200);
}
hidden = !hidden;
});Stack Overflow用户
发布于 2013-05-14 19:16:21
试试这个：
var hidden = true;
$("#logo").click(function () {
var bottom = hidden ? "0" : "-40";
$(this).stop().animate({bottom: bottom}, 1200);
hidden = !hidden;
});Stack Overflow用户
发布于 2013-05-14 19:25:02
试试这个：
css
#logo {
position:fixed;
bottom:-40px;left: 5%;
width:70px; height:80px;
background:blue;
cursor:pointer;
transition: all 0.5s;
}
.long {
bottom: 0 !important;
transition: all 0.5s;
}js
$(function(){
$("#logo").click(function() {
$(this).toggleClass('long');
});
});JS fiddle link
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16541699
复制相关文章
相似问题
腾讯云开发者
