fadeOut（）和slideUp（）在同一時間嗎？

我找到了jQuery: FadeOut then SlideUp這很好，但它不是那個。fadeOut（）和slideUp（）在同一時間嗎？

我該如何在同一時間和slideUp()？我嘗試了兩次單獨的setTimeout()調用，但延遲相同，但頁面加載後發生了slideUp()。

有沒有人這樣做？

2010-03-05 Matthew

你可以做這樣的事情，這是一個充滿切換版本：

$("#mySelector").animate({ height: 'toggle', opacity: 'toggle' }, 'slow');

對於嚴格意義上的淡出：

$("#mySelector").animate({ height: 0, opacity: 0 }, 'slow');

來源

2010-03-05 14:50:25

* bonks尼克·那些' 'show''應該是'' toggle'' – Powerlord 2010-03-05 15:33:00

@Powerlord - Woops你是對的，正在測試這裏的展示，doh – 2010-03-05 15:43:47

我也有類似的問題，並固定它這樣。

$('#mydiv').animate({ 
      height: 0, 
     }, { 
      duration: 1000, 
      complete: function(){$('#mydiv').css('display', 'none');} 
     }); 
$('#mydiv').animate({ 
      opacity: 0, 
     }, { 
      duration: 1000, 
      queue: false 
     });

隊列屬性告訴它是否排隊動畫或只在一些網頁生澀運動立即播放

來源

2011-12-16 19:17:17 Rob

直接高度動畫效果。但是，將CSS轉換與jQuery的slideUp()相結合使得平滑消失的行爲。

function slideFade(elem) { 
    var fade = { opacity: 0, transition: 'opacity 0.5s' }; 
    elem.css(fade).slideUp(); 
    } 

slideFade($('#mySelector'));

撥弄代碼：
http://jsfiddle.net/00Lodcqf

這是我在dna.js項目中使用的解決方案，您可以查看代碼（github.com/dnajs/dna.js）看到用於切換額外的支持和回調。

來源

2014-10-12 19:39:37

不錯的代碼，謝謝！它的工作方式與slideUp（）+ fadeOut（） – 2015-01-25 05:12:19

謝謝。由於CodeKoalas的回答中提到的原因，Nick Craver接受的答案對我無效。不過，我更喜歡你的代碼，因爲它可以讓你爲淡入淡出和不透明效果設置不同的時間。（例如，我喜歡當你設置的淡入淡出速度比滑上快一點。）但是，我不確定你的平滑度要求。在我的電腦上，你的代碼產生的效果在IE中很流暢，但在Chrome中並不特別。 – Atlas 2016-03-30 21:10:57

「Nick Craver」接受的答案絕對是您的選擇。我唯一要補充的是他的回答實際上並沒有「隱藏」它，這意味着DOM仍然認爲它是一個可行的元素來展示。

這可能是一個問題，如果您在'滑動'元素上有邊距或填充...他們仍然會顯示。所以，我只是增加了一個回調的動畫（）函數實際上隱藏動畫完成後：

$("#mySelector").animate({ 
    height: 0, 
    opacity: 0, 
    margin: 0, 
    padding: 0 
}, 'slow', function(){ 
    $(this).hide(); 
});

來源

2015-02-20 22:28:37 CodeKoalas

'正確答案' – 2017-08-12 21:15:42

基於@CodeKoalas投擲一個更細化在那裏。它佔垂直邊界和填充，但不是水平的。

$('.selector').animate({ 
    opacity: 0, 
    height: 0, 
    marginTop: 0, 
    marginBottom: 0, 
    paddingTop: 0, 
    paddingBottom: 0 
}, 'slow', function() { 
    $(this).hide(); 
});

來源

2015-07-08 21:20:38 nathancahill

有可能與slideUp和fadeOut方法來做到這一點自己像這樣：

$('#mydiv').slideUp(300, function(){ 
    console.log('Done!'); 
}).fadeOut({ 
    duration: 300, 
    queue: false 
});

來源

2018-01-11 18:45:57 CupOfTea696

fadeOut（）和slideUp（）在同一時間嗎？

回答

相關問題