使用Jquery切换动画

Question

我需要切换动画，我希望每次我点击类（消息）其他类（.message2和down-box2）martin top，当我再次点击同一个类（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>

Answer 1

请检查一下。它一定会帮到你。

＆＃13;

＆＃13;

var $div = $('#div')
$('button').click(function() {
  $div.toggleClass('isOut')
  var isOut = $div.hasClass('isOut')
  $div.animate({marginTop: isOut ? '30%' : '0'}, 300)
})

＆＃13;

#div{
    background:blue;
    width:50%;
    height:50px;
    margin-left:0%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;