2

JQuery の機能を利用しようとしていますが、読み込み要求の前にload()アニメーションが発生しない理由がわかりません。

たとえば、次のようなスクリプトがあるとします。

$('#clickme').click(function() {
    $('#content').slideUp(500);
    $('#content').slideDown(500);
});

http://jsfiddle.net/593cC/

すると、まさにその通りです。上にスライドしてから、下にスライドします。しかし、load()これらの 2 行の間に関数を配置すると、アニメーションの最初の行は完全に無視され、残りの行だけが実行されます。 

$('#clickme').click(function() {
    $('#content').slideUp(500);
    $('#content').load('myotherpage.php').hide();
    $('#content').slideDown(500);
});

http://jsfiddle.net/593cC/1/

どうしてこれなの？私は操作を試みましたdelay()が、成功しませんでした。これを防ぐにはどうすればよいのでしょうか?

どうもありがとう、そう

4

4 に答える 4

3

適切にslideUpを行いますが、.loadは要素を空にするため、要素の高さが突然0+パディングになるため、即座に発生したように見えます。

ここでは .load を使用しないことをお勧めします。

$('#clickme').click(function() {
    // get data
    var request = $.get("myotherpage.php");
    $('#content').slideUp(500,function(){
        // when request is done AND the element is hidden, apply content and slide it back down.
        request.done(function(html){
            $('#content').html( $.parseHTML(html) ).slideDown(500);
        });
    });
});

これにより、リクエストにかかる時間が 500 ミリ秒未満である限り、slideUp と slideDown の間に遅延は発生しません。

于 2013-05-01T17:45:15.430 に答える
2

load関数のコールバック内で使用してみてくださいslideUp:

$('#content').slideUp(500 ,function() {
    $('#content').load('myotherpage.php').hide();
});

更新されたフィドル

于 2013-05-01T17:40:52.883 に答える
1

これを試して：

$('#content').slideUp(500).load('myotherpage.php', function () {
    $('#content').slideDown(500);
});
于 2013-05-01T17:44:38.407 に答える
1

slideupコールバック内とロード用コールバック内にロードを配置しますslidedown(非同期であるため)。 http://jsfiddle.net/cwSXa/

。ロード（）

$(document).ready(function () {

    $('#clickme').click(function () {
        $('#content').slideUp(500, function () {
            $('#content').load('myotherpage.php', function () {
                $('#content').slideDown(500);
            });
        });
   });
});
于 2013-05-01T17:45:39.140 に答える