Question

我对JQuery很新，我遇到了淡出然后加载的问题。

我的代码是：

$("#refresh").live("click", function() {
    $("#postbit").fadeOut("slow");
       $("#postbit").load('load.php').fadeIn("slow");
    return false;
});

但它似乎不起作用。如果我以前没有fadeOut并且加载它就可以正常工作。但有没有办法让它首先fadeOut然后让它慢慢淡出:)）

由于

Answer 1

与许多其他jQuery函数一样，

.fadeOut()允许您指定在动画完成后执行的回调函数：

$("#refresh").live("click", function() { $("#postbit").fadeOut("slow", function() { $("#postbit").load('load.php').fadeIn("slow"); }); return false; });

一旦淡出动画结束，这将执行匿名函数内的代码（.fadeOut()的第二个散文）。

顺便说一句，您不应再使用.live()，因为它已被弃用，而不是.on()。

Answer 2

如果您正在使用jQuery 1.7或更高版本（可能，如果您是新手），则不应再使用.live，因为它不仅不好，而且在以后的版本中也会被删除。 return false from events is also bad

// Change this to the known parent of #refresh
// Do you even need delegation?
$("#refresh").closest('*').on('click', '#refresh', function (e) {

   // Callback to fadeOut (after fadeOut): load
   $("#postbit").fadeOut('slow', function () {

      // So you can reference this element without selector later
      var $this = $(this);

      // Callback to load -- takes place after load completes
      $this.load('load.php', function () {
         $this.fadeIn('slow');
      });
   });

   // Prevent click from doing whatever it would normally do on #refresh
   e.preventDefault();
});

JQuery fadeOut然后加载

2 个答案: