如何同时运行jQuery fadeIn()和slideDown()？

Question

我有一个带显示器的div:none; 现在我想同时使用fadeIn和slideDown来显示它.

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

正确选择div.但是当我触发效果时,它所做的就是slideDown.如果我只是删除了slideDown,我可以看到fadeIn,所以语法没有任何问题.但是为什么它不能同时触发动画呢？

Answer 1

使用animate()而不是fadeIn():

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

Answer 2

开始height:0px并opacity:0; filter: alpha(opacity = 0)然后在动作做：

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

将高度（我设置为 200）和持续时间（我设置为 350）更改为您想要的任何值。

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
});

这将通过淡化效果调整元素的高度.

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