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>

リンクをクリックするとアニメーション化したいのですが、最初のリンクは左からアニメーション化してフェードインし、2番目のリンクは上からアニメーション化してフェードインし、3番目のリンクは右からアニメーション化してフェードインし、4番目のリンクはからアニメーション化します。一番下とフェードイン、それぞれ速度を制御する必要があるので、最初の速度は500、2番目の速度は1000、3番目の速度は1200、4番目の速度は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 に答える