Question

我有一个球形的元素div。我想要做的是，当我刷新页面时，我想让球落到网页的底部，然后反弹回到页面顶部。

这是我的jQuery函数，其中球落在网页的底部

  $(document).ready(function(){
   $("div").animate({ top: '+=585'}, 400);
});

我使用正确的方法吗？我应该使用slideDwon和slideUp吗？

Answer 1

使用此HTML：

<div id="myDiv" class="myRelativeDiv">test</div>

第一步是将div的位置设置为＆＃34; relative＆＃34; ：

.relative {
    position:relative;
}

第二步是使用Jquery动画（你可以链接许多animate）：

$(function() {
   $("#myDiv").animate({ top: '+=585'}, 400).animate({ top: '0'}, 400);
});

JsFiddle

Answer 2

利用jQuery的动画可链接性。此外，您可能不应该假设585的静态值适用于每个屏幕大小。我建议使用计算值生成偏移量，请检查fiddle：

  $(document).ready(function () {
      var viewportH = $(window).height();
      var elem = $('div');
      var elemH = elem.height();

      elem.animate({
          top: '+=' + (viewportH - elemH) // bottom of screen
      }, 400).animate({
          top: '-=' + (viewportH - elemH) // original position
      });
  });

Answer 3

尝试使用jQuery UI .effect()

$(function() {

  var div = $("div");
  // `elem`: element to apply bounce effect,
  // `n`: number of bounce effects to apply to `elem`
  var bounce = function bounce(elem, n) {
    var fx = function fx(el) {
      return (el || $(this))
        .effect({
          effect: "bounce",
          easing: "swing",
          duration: 400,
          distance: window.innerHeight 
                    - (el.height() + el.offset().top * 1.5),
          direction: "down",
          times: 1
        }).promise()
    };
    return fx(elem).then.apply(elem, $.map(Array(n - 1), function() {
      return fx(elem)
    }));
  };
  
  bounce(div, 1).then(function(el) {
    // do stuff when bounce effect complete
    console.log("complete", el)
  });

});

div {
  position: relative;
  width: 100px;
  height: 100px;
  background: rgb(212, 98, 44);
  border: 2px solid navy;
  border-radius: 50%;
}

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" 
rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div></div>

Answer 4

$(document).ready(function(){
   $("div").animate({ top: '+=585'}, 400);

   setTimeout(
     function() 
    {
      $("div").animate({ top: '-=585'}, 400);
    }, 400);
});

如何使元素从网页的顶部跳到底部并返回顶部？

4 个答案: