jquery fadein css同时用,如何同时运行jQuery fadeIn（）和slideDown（）？

这是我的解决方案，您可以将其用作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

});

这将通过渐变效果调整元素的高度。

它最初发布在我的博客上。