Question

我是jquery的新手，我正在尝试编写一个非常简单的动画。我已经对div运动进行了编码，但我希望动画在进入页面时自动启动，而不需要点击或悬停任何东西。

所以这是代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
$("p").hover(function(){
$("#div02").animate({left:'150px'});
});
$("p").hover(function(){
$("#div01").animate({left:'180px'});
});
});
</script> 

<style>
#div02{background:url(norahalf.png) no-repeat; background-  size:contain;height:100px;width:100px;position:absolute;}

#div01{background:url(rinohalf.png) no-repeat; background-size:contain;height:100px;width:100px;position:absolute; left:500px}
</style>
</head>

<body>
<p>something something dark side</p>
<div id="div02"><img src="pixeltransp.gif" width="100%" height="100%" alt="rino" title="rino"></div>
<div id="div01"><img src="pixeltransp.gif" width="100%" height="100%" alt="nora" title="nora"></div>

任何帮助将不胜感激！

诺拉

Answer 1

在悬停段落后尝试不执行animate功能，然后：

$(document).ready(function(){
    $("#div02").animate({left:'150px'});
    $("#div01").animate({left:'180px'});
}

Answer 2

要自动启动，您只需在页面加载时触发mouseover事件：

$(function() {
    $("p").hover(function() {
        $("#div02").animate({ left: '150px' });
        $("#div01").animate({ left: '180px' });
    })
    .trigger('mouseover');
});

我不确定你是否仍然需要这个p悬停事件。

Jquery动画进入页面

2 个答案:

演示：http://jsfiddle.net/rDMGC/