Question

我有车库门图像。我想要点击按钮图像应该向上移动。但问题是，当我点击按钮图像时，不要移动，而是从图像底部滑动隐藏。这是我的代码

<script type="text/javascript">
$(document).ready(function(){
  $(".open").click(function(){
    $(".gate").slideToggle(3000)
  });
});
</script>

<body>

<div class="main">
<a class="open" >Home page</a>
<div class="gate"></div>
</main>
</body>

Answer 1

如果要移动图像，则应使用.animate（）而不是.slideToggle（）。 .slideToggle（）函数显示或隐藏元素。

Answer 2

幻灯片不是正确的答案。幻灯片是隐藏/淡入淡出效果，而不是动画效果。要获得您正在寻找的效果，您需要为相关元素的css属性设置动画。如果您正在寻找稍微向下移动的元素，则需要为将元素向下移动的属性设置动画。类似的东西：

  $(document).ready(function(){
        $(".open").click(function(){
              $(".gate").animate({
                    marginTop : '-=30px'
              });
        });
  });

您可能还需要考虑绝对定位并使用top属性。或css3翻译。

Answer 3

你不应该使用.slideToggle()，它的作用是通过设置高度值来隐藏/显示元素。

我已准备好并使用.animate()设置示例，以便在按下“首页”字样时为门打开动画：

请参阅此working Fiddle!

<强> HTML

<body>
    <div class="main">
        <a class="open">Home page</a>
        <div class="gate"> </div>
    </div>
</body>

<强> JQUERY

$(document).ready(function(){
  $(".open").click(function(){
      $(".gate").animate({
          "top" : "-=" + $(".gate").outerHeight(true)
      }, 3000);
  });
});

动画结束的位置取决于您的最终目标，以及您应用的CSS！

Jquery slideToggle（）

3 个答案: