如何同時運行jQuery fadeIn（）和slideDown（）？

Question

我有一個div與顯示：無; 現在我想同時使用fadeIn和slideDown來顯示它。

$(this).slideDown({duration: 'slow', queue: false}); 
$(this).fadeIn({duration: 'slow', queue: false}); 

該div被正確選擇。但是當我觸發效果時，它所做的只是slideDown。如果我只是刪除slideDown，我可以看到fadeIn，所以語法沒有任何問題。 但爲什麼不觸發這兩個動畫？

Answer 1

開始與height:0px和opacity:0; filter: alpha(opacity = 0)然後在動作做：

$(this).stop().animate({ 
    height: 200, 
    opacity: 1 
}, 350); 

改變其高度（我設置爲200），以及任何你想要的時間（我設置爲350）。

Answer 2

使用animate()代替fadeIn()：

$(this) 
    .css('opacity', 0) 
    .slideDown('slow') 
    .animate(
    { opacity: 1 }, 
    { queue: false, duration: 'slow' } 
); 

Answer 3

這裏是我的解決方案，你可以使用它作爲一個jQuery插件。

(function($) { 
    'use strict'; 
    // Sort us out with the options parameters 
    var getAnimOpts = function (a, b, c) { 
      if (!a) { return {duration: 'normal'}; } 
      if (!!c) { return {duration: a, easing: b, complete: c}; } 
      if (!!b) { return {duration: a, complete: b}; } 
      if (typeof a === 'object') { return a; } 
      return { duration: a }; 
     }, 
     getUnqueuedOpts = function (opts) { 
      return { 
       queue: false, 
       duration: opts.duration, 
       easing: opts.easing 
      }; 
     }; 
    // Declare our new effects 
    $.fn.showDown = function (a, b, c) { 
     var slideOpts = getAnimOpts(a, b, c), fadeOpts = getUnqueuedOpts(slideOpts); 
     $(this).hide().css('opacity', 0).slideDown(slideOpts).animate({ opacity: 1 }, fadeOpts); 
    }; 
    $.fn.hideUp = function (a, b, c) { 
     var slideOpts = getAnimOpts(a, b, c), fadeOpts = getUnqueuedOpts(slideOpts); 
     $(this).show().css('opacity', 1).slideUp(slideOpts).animate({ opacity: 0 }, fadeOpts); 
    }; 
}(jQuery)); 

現在您可以像使用jQuery的.fadeIn（或fadeOut）效果一樣使用它了。

// Show 
$('.alert').showDown('slow'); 
// Hide 
$('.alert').hideUp('fast', function() { 
    // Animation complete: '.alert' is now hidden 
}); 

這將調整我們的元素的高度與衰落效果。

它是originally posted on my blog。

Answer 4

 $(document).ready(function() { 
    $("#test").bind("click", function() { 
      setTimeout(function() { 
      $('#slidedown').slideDown("slow"); 
     }, 500); 
     $("#content").fadeOut(500); 
     $(this).stop().animate({ "opacity": "1" }, "slow"); 
     }); 
    }); 

這是爲淡出，但我認爲這是你的後。請看看這個例子：http://jsfiddle.net/oddacon/M44md/

Answer 5

現在可以使用CSS3轉換了。它允許實現非常靈活的解決方案。

HTML

<div id="btn">Click me</div> 
<div id="hidden"></div> 

CSS

#hidden { 
    display: none; opacity: 0; height: 100px; background: red; 
    transition: opacity 600ms ease-in-out 0s; 
} 
#hidden.opened { 
    opacity: 1; 
} 

jQuery的

$('#btn').click(function() { 
    var div = $('#hidden'); 
    if (! div.is(':animated')) { 
     div.slideToggle(600).toggleClass('opened'); 
    } 
}); 

Answer 6

更現代的解決辦法是，當你想動畫結合使用的'show'和'hide'值：

$('.show').on('click', function() { 
 
    $('.example').animate({ 
 
    opacity: 'show', 
 
    height: 'show', 
 
    marginTop: 'show', 
 
    marginBottom: 'show', 
 
    paddingTop: 'show', 
 
    paddingBottom: 'show' 
 
    }) 
 
}) 
 
$('.hide').on('click', function() { 
 
    $('.example').animate({ 
 
    opacity: 'hide', 
 
    height: 'hide', 
 
    marginTop: 'hide', 
 
    marginBottom: 'hide', 
 
    paddingTop: 'hide', 
 
    paddingBottom: 'hide' 
 
    }) 
 
})

.example { 
 
    background-color: blue; 
 
    height: 200px; 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    <button type="button" class="show">Show</button> 
 
    <button type="button" class="hide">Hide</button> 
 
</p> 
 
<div class="example"></div>