如何在jquery中使用.animate（）

Question

希望你能查看我的代码。只是想动画。使用'accordionHeader'类切换div标签的顶部位置。

<script type="text/javascript">
  $(document).ready(function() {
    $(".accordionHeader").toggle(function() {
      $(".accordionHeader").animate({"top": "0 144px"}, 500);
      function(){
        $(".accordionHeader").animate({"top": "144px 0"}, 500);
      );
  });
</script>

非常感谢你。

Answer 1

你的意思是：

$(document).ready(function(){
   $(".accordionHeader").toggle(
     function(){
        $(".accordionHeader").animate({"top": "144px"}, 500);
     },
     function() {
        $(".accordionHeader").animate({"top": "-144px"}, 500);
     });
});

作为替代方案，由于不推荐jQuery.toggle()，您也可以这样做：

$(".accordionHeader").on("click", function() {
    var clicked = $(this).data('clicked');
    if (clicked) {
        $(".accordionHeader").animate({"top": "144px"}, 500);
    }
    else {
        $(".accordionHeader").animate({"top": "-144px"}, 500);
    }
    $(this).data("clicked", !clicked);
});

Answer 2

您可以在点击事件

上尝试此操作

 $('.accordionHeader').animate({ position: 'relative', top: '144px' }, 500);