Question

我有这个HTML代码：

<div class = "box">
    <h2>Hello</h2>
    <p>This is a paragraph</p>
</div>
<button class = "btn">Click Here</button>

我有这个CSS代码：

.box{
  width:300px;
  height:300px;
  border:2px solid black;
}
.box h2,p{
  text-align:center;
}

和我的jQuery代码：

$(document).ready(function(){
    $(".btn").on("click", function(){
        $("h2").toggle(1000);
    });
});

此时当我点击我的按钮时，h2向上并向左移动并消失，当我再次单击该按钮时，动画将从左向右消失并消失。我想有切换动画，但我希望h2从中间滑动和滑动。

Answer 1

究竟是什么问题？片段中的动画来回传递，我认为这就是你想要的东西？

$(document).ready(function(){
    $(".btn").on("click", function(){
        $(".box1 h2").slideToggle();
    });
  $(".btn2").on("click", function(){
        $(".box2 h2").animate({
          height: "toggle",
          opacity: "toggle"
        });
    });
});

.box{
  width:200px;
  height:100px;
  border:2px solid black;
  display: inline-block;
  float: left;
}
.box h2,p{
  text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box box1">
    <h2>Hello</h2>
    <p>This is a paragraph</p>
</div>
<button class = "btn">Click Here</button>
<div class = "box box2">
    <h2>Hello2</h2>
    <p>This is a paragraph2</p>
</div>
<button class = "btn2">Click Here</button>

Jquery - onClick - slideUp - slideDown动画

1 个答案: