Question

我希望在点击按钮后从顶部为div框和按钮设置动画，并在单击相同按钮时将框和按钮返回到初始位置。

的CSS：

#box{
    position:relative;
    width:500px;height:200px;
    margin-top:200px;
    border:2px solid black;
    }

#box .info-box{
    position:absolute;
    width:500px;height:200px;
    top:-200px;
    background:green;

#box .button{
    position:absolute;
    width:30px;height:30px;
    background:red;
    top:30px;right:10px;
    }

HTML：

    <div id="box">
    <div class="button"></div>
    <div class="info-box"></div>
    </div>

jQuery在初始点击时为框设置动画。

    $(".button").click(function(){
    $(this).animate({top:-30});
    $(".info-box").animate({top:0}, 300)
    });

我希望动画info-box填充框并button在框外（顶部：-30px）设置动画，然后按住按钮并想要在初始位置返回信息框和按钮点击相同按钮后。

Answer 1

你可以试试这个：

var isAnimate = false;
$(".button").click(function(){
    if(isAnimate){
       $(this).animate({top:30});    
      $(".info-box").animate({top:-200}, 300)
      isAnimate = false;
    }else{
      $(this).animate({top:-30});    
      $(".info-box").animate({top:0}, 300)
       isAnimate = true;
    }        
});

在这里工作小提琴：http://jsfiddle.net/6kzUV/

我希望它有所帮助。

使用jQuery从顶部动画div框

1 个答案: