Javascript 如何使用animate函数在窗口加载时启动jQuery动画？
我制作了这个动画，所有的div都被缩放了两倍，在窗口加载时从初始状态旋转了0度，并在8秒后保持动画效果。但这是行不通的。我使用jqueryanimate实现了这一点，但似乎我做了一些错误的事情，但它并没有起作用。请帮忙Javascript 如何使用animate函数在窗口加载时启动jQuery动画？,javascript,jquery,animation,Javascript,Jquery,Animation,我制作了这个动画，所有的div都被缩放了两倍，在窗口加载时从初始状态旋转了0度，并在8秒后保持动画效果。但这是行不通的。我使用jqueryanimate实现了这一点，但似乎我做了一些错误的事情，但它并没有起作用。请帮忙 <!DOCTYPE <!DOCTYPE html> <html> <head> <title>Gallery Arijit</title> <style type="text/css">
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<title>Gallery Arijit</title>
<style type="text/css">
.nvidia{
width: 230px;
height: 230px;
border:1px solid black;
position: relative;
left:130px;
top: 150px;
float: left;
background-color: white;
box-shadow: 0px 3px 15px 1px #333333;
transition: all 0.5s linear;
}
.nvidia:nth-child(even){
transform:rotate(15deg);
}
.nvidia:nth-child(odd){
transform:rotate(-15deg);
}
/*.nvidia:nth-child(even):hover{
transform:rotate(0deg) scale(2,2);
z-index:1000;
}
.nvidia:nth-child(odd):hover{
transform:rotate(0deg) scale(2,2);
z-index:1000;
}*/
img{
margin:10px 10px 4px 23px;
}
p{
text-align: center;
font-size: 8px;
padding: 3px;
}
</style>
</head>
<body>
<div class="nvidia div1">
<img src="nvidia-logo.jpg" width="180" height="180">
<p>This is Nvidia logo.An awesome GPU Company.I ove it</p>
</div>
<div class="nvidia div2">
<img src="nvidia-logo.jpg" width="180" height="180">
<p>This is Nvidia logo.An awesome GPU Company.I ove it</p>
</div>
<div class="nvidia div3">
<img src="nvidia-logo.jpg" width="180" height="180">
<p>This is Nvidia logo.An awesome GPU Company.I ove it</p>
</div>
<div class="nvidia div4">
<img src="nvidia-logo.jpg" width="180" height="180">
<p>This is Nvidia logo.An awesome GPU Company.I ove it</p>
</div>
<div class="nvidia div5">
<img src="nvidia-logo.jpg" width="180" height="180">
<p>This is Nvidia logo.An awesome GPU Company.I ove it</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval(ani,8000);
});
</script>
<script type="text/javascript">
function ani(){
$(".div1").animate({transform:'rotate(0deg) scale(2,2)',z-index:'1000'},"slow");
$(".div2").animate({transform:'rotate(0deg) scale(2,2)',z-index:'1000'},"slow");
$(".div3").animate({transform:'rotate(0deg) scale(2,2)',z-index:'1000'},"slow");
$(".div4").animate({transform:'rotate(0deg) scale(2,2)',z-index:'1000'},"slow");
$(".div5").animate({transform:'rotate(0deg) scale(2,2)',z-index:'1000'},"slow");
}
</script>
</body>
</html>
您的代码中有几个问题。z索引键导致语法问题。一旦修复了该问题，转换似乎就无法与jQuery animate一起工作。尝试改用css
function ani(){
$(".div1").css({transform:'rotate(0deg) scale(2,2)'},"slow");
$(".div2").css({transform:'rotate(0deg) scale(2,2)'},"slow");
$(".div3").css({transform:'rotate(0deg) scale(2,2)'},"slow");
$(".div4").css({transform:'rotate(0deg) scale(2,2)'},"slow");
$(".div5").css({transform:'rotate(0deg) scale(2,2)'},"slow");
}
下面是我上面列出的一些变化
试试这个带有z索引的
$(".div1").css({transform:'rotate(0deg) scale(2,2)','z-index':'1000'},"slow");
$(".div2").css({transform:'rotate(0deg) scale(2,2)','z-index':'1000'},"slow");
$(".div3").css({transform:'rotate(0deg) scale(2,2)','z-index':'1000'},"slow");
$(".div4").css({transform:'rotate(0deg) scale(2,2)','z-index':'1000'},"slow");
$(".div5").css({transform:'rotate(0deg) scale(2,2)','z-index':'1000'},"slow");
谢谢你提供的信息。但是我想让它们一个接一个地动画化。如果我使用css，那么他们将开始一起制作动画，就像在动画功能中一样，我们可以在队列中制作动画。那么如何修复呢，先生？即使是在你的代码中，如果动画工作了，我想它也会一次将它们全部动画化。你的setInterval函数可以用来一个接一个地设置动画什么不是函数循环？