Question

$(document).ready(function() {
  $("div:nth-child(1)").animate({
    top: '+=585'
  }, 250);

  setTimeout(function() {
    $("div:nth-child(1)").animate({
      top: '-=585'
    }, 250);

  }, 250);

  $("div:nth-child(2)").animate({
    top: '-=585'
  }, 250);

  setTimeout(function() {
    $("div:nth-child(2)").animate({
      top: '+=585'
    }, 250);

  }, 250);

});

<div>This is a cube</div>
<div>This is a triangle</div>

我有以下两个div：

<div>This is a cube</div>
<div>This is a triangle</div>

这是我的jQuery，当我在浏览器中运行它时，但是当我在jsfiddle中测试时它不起作用：

$(document).ready(function(){
  $("div:nth-child(1)").animate({ top: '+=585'}, 250);

  setTimeout(function() {
  $("div:nth-child(1)").animate({ top: '-=585'}, 250);

}, 250);

  $("div:nth-child(2)").animate({ top: '-=585'}, 250);

  setTimeout(function() {
    $("div:nth-child(2)").animate({ top: '+=585'}, 250);

}, 250);



});

我的jQuery有什么问题吗？我该如何解决这个问题？

Answer 1

这是一个证明问题的小提琴：http://jsfiddle.net/y104ztry/1/

我包装了div并将包装器设置为position:relative并且它有效。

HTML：

<div id="wrapper">
    <div>This is a cube</div>
    <div>This is a triangle</div>
</div>

CSS：

#wrapper {
    position: relative;
}

小提琴：http://jsfiddle.net/bfqjbexe/1/

为什么以下jQuery在Chrome中有效但在jsfiddle中不起作用？

1 个答案: