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

How to run jQuery fadeIn() and slideDown() simultaneously?

提问by iWebaholic

I've got a div with display: none; Now I want to show it using both: fadeIn and slideDown simultaneously.

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

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

The div is selected properly. But when I trigger the effect, all it does is the slideDown. And if I just delete the slideDown I can see the fadeIn, so there is nothing wrong with the syntax. But why doesn't it trigger both animations?

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

回答by bpierre

Use animate()instead of fadeIn():

使用animate()代替fadeIn()：

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

回答by moe

start with height:0pxand opacity:0; filter: alpha(opacity = 0)then on the action do:

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

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

Change the height (i set to 200) and the duration (i set to 350) to whatever you want.

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

回答by Etienne Baudry

Here is my solution, you can use it as a jQuery plugin.

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

Now you can use it the same way you would use jQuery's .fadeIn (or fadeOut) effect.

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

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

This will resize our element's height with a fading effect.

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

It was originally posted on my blog.

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

回答by Daniel Guerreiro

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

回答by zzzzBov

The more modern solution is to use values of 'show'and 'hide'when you want to combine animations:

更现代的解决方案是使用'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>

回答by Oddacon

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

this is for fade out but i think it's what your after. please have a look at the example too: http://jsfiddle.net/oddacon/M44md/

这是为了淡出，但我认为这是你的追求。请也看看这个例子：http: //jsfiddle.net/oddacon/M44md/

回答by Webars

It's possible now to use CSS3 transitions. It allows to achieve very flexible solutions.

现在可以使用 CSS3 过渡了。它允许实现非常灵活的解决方案。

HTML

HTML

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

CSS

CSS

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

jQuery

jQuery

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