javascript - Jquery 淡出回调触发太快

Question

尽我所能，我无法理解为什么这段代码...

function doVideoBanners () {

    // Set which banner we are fading out
    if ($('#youTubeBanner').length) {
        $theBannerToFade = $('#youTubeBanner');
    } else {
        $theBannerToFade = $('#revSliderBanner');
    }

    $('#find-h-banner-play').on('click', function() {

        // If code entry page, we don't need to scroll
        if (!$(this).hasClass('entry')) window.scrollTo(0, 0);

        $theBannerToFade.fadeOut('slow', function () {

            //////// Responsive YouTube iframe ////////
            var URL = 'xxxx';
            var videoIframe = '<iframe style="visibility:hidden;" onload="this.style.visibility=\'visible\'"; width="1100" height="524" class="youTube" src="http://www.youtube.com/embed/' + URL + '?rel=0;autoplay=1" frameborder="0" allowfullscreen allowtransparency></iframe>';

            // Because of elements jumping around, we need to set everything before we show the iframe
            $('.videoWrapper').html(videoIframe);

            // In the CSS videoWrapper is temporarily set to 524px
            $('.videoWrapper')
                .css('height', '0')
                .css('paddingBottom', '45.365%');

            $('.videoWrapper').removeClass('hidden');

        });

        // We don't want to restart the video should the user click it again
        $(this).off();
        $(this).css('cursor', 'default');

    });
}

...不使元素淡出然后触发回调。我试过 .promise() 和 .done()。专家有什么想法吗？

Answer 1

你试过在函数上设置.delay()吗？