Как запустить jQuery fadeIn() и slideDown() одновременно?

Ответ 1

Используйте animate() вместо fadeIn():

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

Ответ 2

Вот мое решение, вы можете использовать его как плагин 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));

Теперь вы можете использовать его так же, как вы бы использовали эффект jQuerys.fadeIn(или fadeOut).

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

Это изменит размер нашей высоты с эффектом затухания.

Это было первоначально опубликованным в моем блоге.

Ответ 3

начните с height:0px и opacity:0; filter: alpha(opacity = 0), а затем выполните действие:

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

Измените высоту (i установлен на 200) и продолжительность (i установлена ​​на 350) в соответствии с тем, что вы хотите.

Ответ 4

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

Ответ 5

Теперь можно использовать переходы 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');
    }
});

Ответ 6

Более современное решение - использовать значения '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>