在JQuery加载之前运行动画

我试图利用JQuery的load()函数，我很疑惑为什么动画不会发生之前的加载请求。在JQuery加载之前运行动画

举例来说，如果我有一个脚本，上面写着：

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

http://jsfiddle.net/593cC/

然后，这也正是发生了什么。它向上滑动，然后滑落。但是，如果我在这两行之间放置了一个load()函数，它将完全忽略第一条动画行，并仅执行其余行。

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

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

这是为什么？我曾尝试将delay()放在操作上，但没有成功。我能做些什么来防止这种情况发生，所以我的事件会有很好的效果？

非常感谢，SO

来源

2013-05-01 RCNeil

他们很可能正在运行的同步 – 2013-05-01 17:38:17

可能。我一直认为JQuery接连接受订单...... – RCNeil 2013-05-01 17:40:03

尝试使用load里面你slideUp功能的回调：

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

Updated Fiddle

来源

2013-05-01 17:40:52 Eli

不错。这是一个很棒的提示。我最终在加载后将slideDown（）函数嵌套为回调函数，以确保一切顺利进行。将标记为已接受。谢谢！ – RCNeil 2013-05-01 17:44:02

试试这个：

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

来源

2013-05-01 17:44:38

它做正确的效果基本show，然而，si nce .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); 
     }); 
    }); 
});

这导致在那里是效果基本show和了slideDown之间没有延迟，只要请求需要500ms以内。

来源

2013-05-01 17:45:15

感谢Kevin的解释。非常感谢。 – RCNeil 2013-05-01 17:51:15

将您的负载放在回调中的slideup回调和slidedown内部（因为它是异步的）。 http://jsfiddle.net/cwSXa/

.load()

$(document).ready(function() { 

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

来源

2013-05-01 17:45:39 PSL

在JQuery加载之前运行动画

回答

相关问题