我有一个效果很好的动画。但我无法扭转它。有人可以给我提示吗?
$(".arrowclose").click(function() {
$(".arrow").animate({ left: "218px" }, 1000, "easeOutQuad");
setTimeout(function() {
$(".arrow").addClass("arrow_right arrowopen");
$(".arrow").removeClass("arrow_left arrowclose");
}, 1000);
});
$(".arrowopen").click(function() {
$(".arrow").animate({ left: "486px" }, 1000, "easeOutQuad");
setTimeout(function() {
$(".arrow").addClass("arrow_left arrowclose");
$(".arrow").removeClass("arrow_right arrowopen");
}, 1000);
});
最佳答案
尝试一下并删除不需要的类
$(".arrow").click(function() {
$(this).stop().animate({ left: $(this).offset().left > 218 ? 218 : 486 }, 1000, "easeOutQuad", function() {
$(this).toggleClass("arrowopen, arrowclose");
});
});
编辑
到目前为止,我知道您需要一个箭头来切换容器进出,所以您可能需要这个:
将箭头放入容器内:
<div class="wrapcontent">
Test
<div class="arrow arrowopen"></div>
</div>
相应的样式:
.arrowopen{
position:absolute;
right:-20px;
top:0px;
cursor:pointer;
width:20px;
height:20px;
}
.arrowopen {background:#cf5;}
.arrowclose {background:#f00;}
.wrapcontent {
position:absolute;
width: 300px;
height:100px;
background:#888;
left:-300px;
}
然后在箭头上 -> 单击为父容器设置动画:
$(".arrow").click(function() {
$wrapcontent = $(this).closest('.wrapcontent');
wrapOffset = $wrapcontent.offset().left;
$wrapcontent.stop().animate({ left: !wrapOffset ? -300 : 0 }, 1000, "easeOutQuad");
$(this).toggleClass("arrowopen, arrowclose");
});
关于jquery - 如何切换动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14444462/