-1

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

<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>
4

3 回答 3

0

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

我已经准备好并使用.animate()为大门打开动画：

看到这个工作小提琴！

HTML

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

查询

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

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

于 2012-05-22T20:08:15.040 回答
0

如果你想移动图像，你应该使用 .animate() 而不是 .slideToggle()。.slideToggle() 函数显示或隐藏你的元素。

于 2012-05-22T19:55:43.593 回答
0

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

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

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

于 2012-05-22T20:02:26.173 回答