如何同时运行jQuery fadeIn（）和slideDown（）？
我有一个显示div：none; 现在我想同时使用：fadeIn和slideDown。
$(this).slideDown({duration: 'slow', queue: false}); $(this).fadeIn({duration: 'slow', queue: false}); div被正确select。 但是，当我触发效果，它所做的只是slideDown。 如果我只是删除slideDown，我可以看到fadeIn，所以没有任何错误的语法。 但为什么不触发这两个animation？
使用animate()代替fadeIn() ：
$(this) .css('opacity', 0) .slideDown('slow') .animate( { opacity: 1 }, { queue: false, duration: 'slow' } );
这是我的解决scheme，你可以使用它作为一个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 });
这将调整我们的元素的高度，并带来淡化的效果。
它最初发布在我的博客上 。
从height:0px和opacity:0; filter: alpha(opacity = 0) opacity:0; filter: alpha(opacity = 0)然后在动作做：
$(this).stop().animate({ height: 200, opacity: 1 }, 350);
改变高度（我设为200）和持续时间（我设为350）为任何你想要的。
$(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/
现在可以使用CSS3转换。 它允许实现非常灵活的解决scheme。
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'); } });
更现代的解决scheme是当你想要结合animation时使用'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>
