Question

我正在制作这个动画，其中所有的div都被缩放为双倍，并在窗口加载时从其初始状态旋转0度，并在8秒后保持动画。但这不起作用。我使用jQuery动画来实现这一点，但似乎我做了一些错误，因为它无法正常工作。请帮忙。

    <!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>

Answer 1

您的代码中存在一些问题。 z-index密钥导致语法问题。一旦你修复了，变换似乎不适用于jQuery动画。请尝试使用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");
}

这是我在上面列出的变化的小提琴 http://jsfiddle.net/v1c72ueL/

Answer 2

使用z-index

尝试这个

 $(".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");

如何使用animate函数在窗口加载时启动jQuery动画？

2 个答案: