Jquery页面加载动画

-1

我已经看过一些回答的问题，但他们都没有工作。我试图让我的徽标旋转，并在页面加载时从页面翻译过来。我用CSS旋转，但使用.animate来翻译它。我找不到任何让我的代码工作Jquery页面加载动画

<div class="logo"> 
     </div> 


     <div class="info"> 

     </div> 
    <script> 
    $(function() { 
     $('.logo').animate(
     {left: '200px'}, 2000 
     ); 
    }); 
    </body> 

body { 
    background-image: url('images/floor.jpg'); 
    background-size: cover; 
    background-color: #000; 
    background-repeat: no-repeat; 
} 

.info { 
    background-color: #966f33; 
    width: 12%; 
    margin-left: 64%; 
    height: 100%; 
    position: absolute; 
    margin-top: -208px; 
    box-shadow: 0px 0px 35px 10px #000; 
} 

.logo { 
    background-image: url('images/logo.png'); 
    width: 220px; 
    height: 220px; 
    position: relative; 
    background-size: 100% 100%; 
    margin-top: -20px; 
    margin-left: -220px; 
    animation: rotate 2s linear once; 
} 

@keyframes rotate { 
    0% {transform: rotate(0deg);} 
    100% {transform: rotate(720deg);} 
}

来源

2016-03-01 Shniper

你拨弄没有jQuery的包括在内。点击脚本窗口中的齿轮图标，然后选择要加载的jQuery版本。 –

即使jquery加载它不工作https://jsfiddle.net/9s66oyd4/1/ – Shniper

只是动画marginLeft，而不是留下了jQuery的。你的div有相对的位置。

$(function() { 
    $('.logo').animate({ 
    marginLeft: '200px' 
    }, 2000); 
});

我也改变了小提琴中的图片网址，以便它可以显示一些东西。

这里它的工作原理： https://jsfiddle.net/9s66oyd4/2/

来源

2016-03-01 18:29:22

感谢这工作。我头脑中也有jQuery的错误链接。 – Shniper

Jquery页面加载动画

回答

相关问题