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

Question

我有一个display为none的div； 现在我想同时使用fadeIn和slideDown来显示它。

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

元素已被正确选择。但当我触发效果时，它只会执行slideDown动画。如果我删除slideDown，我可以看到fadeIn动画，因此语法没有问题。但为什么它不会触发两个动画？

- iWebaholic

---

我一直在尝试解决这个问题。虽然我没有得到“正确”的答案，但这可能会对你有所帮助：$('bla').slideDown基本上在源代码中映射到这个：$('bla').animate({ height: 'show', paddingTop: 'show', paddingBottom: 'show', marginTop: 'show', marginBottom: 'show' }。因此，您可以将其放置在其中，动画将像slideDown一样运行。 - Brandon

@iWebaholic：请选择正确的答案。 - Adriano

请将 @pbierre 的答案选为被采纳的答案。很好的解决方案。 - earl3s

Answer 1

使用 animate() 替代 fadeIn()：

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

- bpierre

---

这个答案应该被选为正确答案！完美地发挥了作用。谢谢！ - Jaime de los Hoyos M.

是的...这是正确的答案。然而，我更喜欢“快速”动画而不是“慢速”动画，因为即使 UI 的响应有一点延迟也可能会让用户感到不耐烦。 - Phil Nicholas

也许需要更多的解释，为什么它们不能同时运行？不过我不确定为什么这还没有被选为正确答案。 - Andrew Ice

非常好的解决方案。应该选择为正确答案。 - glln

Answer 2

从 height:0px 和 opacity:0; filter: alpha(opacity = 0) 开始，然后在动作上执行：

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

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

- moe

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

这将使用淡入淡出效果调整我们元素的高度。

它最初是在我的博客上发布的（链接）.

- Etienne Baudry

---

非常好。我移除了 .css('opacity', 0) 和 .css('opacity', 1)，因为当我想要在对象仍在 showDown 的时候隐藏它时，不透明度会直接变为 1，然后才尝试隐藏。 - RoLYroLLs

我认为两个函数都应该返回 $(this)... 以允许方法链接。 - Paul

Answer 4

$('.target')                    
    .hide()  
    .slideDown(500, 'swing')  
    .css('opacity', 0)  
    .animate({opacity: 1}, {queue: false, duration: 1000});

- Daniel Guerreiro

---

如果您解释代码并说明它如何解决问题，那么您的答案将更好。 - Nic3500

Answer 5

更现代的解决方案是在需要结合动画时使用'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>

- zzzzBov

---

正是我所需要的，谢谢！我在大括号的末尾添加了, "slow"以使其更加流畅。 - iorgv

Answer 6

        $(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/

- Oddacon

Answer 7

现在可以使用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');
    }
});

- Arsen K.