无法为我的 div 制作动画并留有边距
Can't animate my div with margin left
我想要一个动画,用一个计时器滚动我的 div 并留有边距,但我什至不能有一个合适的动画,当我在我的网站上尝试时,它立即得到"-margin" 和测试什么都没有。当我 copy/paste 一个工作代码时甚至无法获得动画。我不明白。这是我的代码:
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 秒]
如果有人可以帮助我,谢谢
使用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>
首先,您的代码未在 JSFiddle 上 运行ning,因为它需要对外部文件的 https
请求。
其次,您的 CSS 有一个过渡延迟,导致您的动画功能无法正确 运行。
$(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>
我想要一个动画,用一个计时器滚动我的 div 并留有边距,但我什至不能有一个合适的动画,当我在我的网站上尝试时,它立即得到"-margin" 和测试什么都没有。当我 copy/paste 一个工作代码时甚至无法获得动画。我不明白。这是我的代码:
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 秒]
如果有人可以帮助我,谢谢
使用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>
首先,您的代码未在 JSFiddle 上 运行ning,因为它需要对外部文件的 https
请求。
其次,您的 CSS 有一个过渡延迟,导致您的动画功能无法正确 运行。
$(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>