0

嗨我做了这个代码：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#navigation a:first-child').click(function(){
    $("#space").load("index.html #container").animate({
        top: '-=120'
        }, 1000, function() {
        // Animation complete.
        });
});

$('#navigation a:nth-child(2)').click(function(){
    $("#space2").load("index.html #container2").animate({
            bottom: '-=120'
        }, 1000, function() {
        // Animation complete.
        });
});         
}); 
</script>
<div id="navigation">
    <a href="#">home</a>
    <a href="#">test</a>
</div>

<div id="space" style="border: 1px solid #000000;">

</div>

<div id="space2" style="border: 1px solid #ff0000;">

</div>

我希望它在单击链接时进行动画处理，但第一个从左侧动画并淡入，第二个链接从顶部动画并淡入，第三个从右侧动画并淡入，第四个从动画底部和淡入，每个我都需要控制速度，所以第一个速度为 500，第二个为一千，第三个为 1200，第四个为 1500。

如果可能的话，我希望他们都加载到同一个区域。不知道能不能实现

谢谢

4

1 回答 1

1

看起来你一切都正确，你可能只想将你的动画移动到 .load 回调中，这样动画在元素加载之前不会触发。像这样：

$("#space").load("index.html #myDiv", function(){
    $(this).animate({
        top: '-=120'
            }, 1000, function() {
            // Animation complete.
            });
    });

当然你可以控制速度和动画彼此独立没问题。只需将“1000”更改为“500”或“1200”或任何您想要的。另外，我猜你会想用一个绝对位置来定位“空间”元素（比如可能离开页面？），给它们一个宽度和高度，动画会更明显。

于 2012-12-27T22:01:54.643 回答