動畫並沒有消失

Question

我有這樣一個場景： 當您單擊另一個DIV將拿出，並顯示等待動畫，它工作正常，但 時，我希望它消失它不會在這裏工作是我的代碼：

$(document).ready(function() { 


$('#t').hide(); 
$("#clickme").click(function() { 
    $("#t").fadeIn(4000, function() { 
     // Animation complete 
     $("#t").show(); 
    }); 
}); 
setTimeout(

}, 5000); 
$("#t").fadeOut(4000, function() { 
    $("#t").hide(); 
}); 
}); 

和小提琴鏈接如下：http://jsfiddle.net/hminaee/qF8dX/1/

誰能幫助？

Answer 1

您可以使用delay()這裏來代替：

$(document).ready(function() { 
    $('#t').hide(); 
    $("#clickme").click(function() { 
     $("#t").fadeIn(4000, function() { 
      $("#t").show().delay(4000).fadeOut(1000); 
     }); 
    }); 
}); 

所以基本上，顯示出你的等待動畫完成後，它會延時4秒，然後在1秒內淡出你的等待動畫。

Fiddle Demo

---

基於您的評論，你可以添加 pointer-events: none到您的模式，讓點擊事件經過模態：

.modal { 
    pointer-events: none; 
} 

Updated Fiddle

Answer 2

此密切與您的原始代碼綁定： 個Fiddle

$(document).ready(function() { 
    $('#t').hide(); 
    $("#clickme").click(function() { 
     $("#t").fadeIn(4000, function() { 
      // Animation complete 
     }).promise().done(function() {; 
      $("#t").fadeOut(4000, function() { 
       // Animation complete 
       $("#t").hide(); 
      }); 
     }); 
    }); 
});