0

我想要一个动画，有一个计时器可以滚动我的 div 并留有余量，但我什至不能有一个合适的动画，当我在我的网站上尝试时，它只是立即获得“-margin”而在测试中什么也没有. 当我复制/粘贴工作代码时，甚至无法获得动画。我不明白。这是我的代码：

HTML：

<div id="twitter">
  <img style="width:50px;height:50px;" src="mypicture">
  <img id="next_tweet" src="mypicture">
  <img id="next_tweet" src="mypicture">

</div>
<script src="http://code.jquery.com/jquery-1.9.0rc1.js"></script>

CSS：

#twitter {
  width: 1000%;
  padding: 95px 0 0 400px;
  margin-left: 0px;
  height: 220px;
  -webkit-transition-delay: 2s;
  /* Safari */
  transition-delay: 2s;
}

#next_tweet {
  margin-left: 65px;
  width: 50px;
  height: 50px;
}

JavaScript：

jQuery(document).ready(

  function(){
            jQuery('#twitter').animate({
                marginLeft : "-1060px"
            },1000);

});

https://jsfiddle.net/sqs7btcx/1/

[只希望我的 div 从右到左，如果可能的话全部 5 秒]

如果有人可以帮助我，谢谢

4

2 回答 2

1

使用js库：https ://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery(document).ready(

  function(){
            jQuery('#twitter').animate({
                marginLeft : "-1060px"
            },1000);

});
</script>
于 2016-10-19T09:59:41.863 回答
0

首先，您的代码没有在 JSFiddle 上运行，因为它需要https对外部文件的请求。

其次，您的 CSS 有一个过渡延迟，导致您的动画功能无法正常运行。

JSFiddle

$(document).ready(function() {
    $('#twitter').animate({
      marginLeft: "-=115px"
    }, 5000);
  });
#twitter {
  width: 1000%;
  padding: 95px 0 0 400px;
  margin-left: 0px;
  height: 220px;
}

#next_tweet {
  margin-left: 65px;
  width: 50px;
  height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="twitter">
  <img style="width:50px;height:50px;" src="http://image.noelshack.com/fichiers/2015/10/1425504302-kancolle-9.png">
  <img id="next_tweet" src="http://image.noelshack.com/fichiers/2015/10/1425504302-kancolle-9.png">
  <img id="next_tweet" src="http://image.noelshack.com/fichiers/2015/10/1425504302-kancolle-9.png">
  <img id="next_tweet" src="http://image.noelshack.com/fichiers/2015/10/1425504302-kancolle-9.png">
  <img id="next_tweet" src="http://image.noelshack.com/fichiers/2015/10/1425504302-kancolle-9.png">
  <img id="next_tweet" src="http://image.noelshack.com/fichiers/2015/10/1425504302-kancolle-9.png">
</div>

于 2016-10-19T10:02:13.923 回答