使用Jquery切换动画
使用Jquery切换动画
提问于 2017-05-11 19:23:08
我需要切换动画，我希望每次我点击这个类(message)时，另一个类(.message2和下框2)就会出现，当我再次点击相同的类(Message)时，它又会返回到默认的css。
<script>
$(document).ready(function(){
$(".down-box").hide();
});
$(".message").click(function(){
$(".down-box").toggle();
$(".message2").animate({"marginTop":"+310px"});
$(".down-box2").animate({"marginTop":"+370px"});
});
</script>回答 2
Stack Overflow用户
发布于 2017-05-11 19:29:12
请检查一下这个。它肯定会对你有帮助的。
var $div = $('#div')
$('button').click(function() {
$div.toggleClass('isOut')
var isOut = $div.hasClass('isOut')
$div.animate({marginTop: isOut ? '30%' : '0'}, 300)
})#div{
background:blue;
width:50%;
height:50px;
margin-left:0%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Click</button>
<br><br>
<div id="div"></div>
Stack Overflow用户
发布于 2017-05-11 19:34:42
检查工作代码段
$("#arrow_container").click( function(event){
event.preventDefault();
if ( $(this).hasClass("isDown") ) {
$("#nav").stop().animate({marginTop:"-100px"}, 200);
} else {
$("#nav").stop().animate({marginTop:"0px"}, 200);
}
$(this).toggleClass("isDown");
return false;
});#nav {
width: 250px;
height: 115px;
margin: -100px 0px 0px -webkit-calc(100% - 280px);
position: absolute;
background:red;
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="nav">
</div>
<button id="arrow_container">click</button>
检查这个
$(document).ready(function () {
$(".down-box").hide();
$(".message").toggle(function () {
$(".down-box").show();
$(".message2").animate({"marginTop":"310px"});
$(".down-box2").animate({"marginTop":"370px"});
return false;
},
function () {
$(".down-box").hide();
$(".message2").animate({"marginTop":"0px"});
$(".down-box2").animate({"marginTop":"0px"});
return false;
});
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43914005
复制相关文章
相似问题
腾讯云开发者
