javascript - 如何在 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);