Jquery 中的动画和加载

Question

您好，我已编写此代码：

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

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

谢谢

Answer 1

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

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

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