Question

我正在使用JQuery淡出并将新图像淡入我的网页。问题是我的程序中的下一行代码似乎是在FadeOut函数运行完毕之前运行的。有没有办法在FadeOut函数之后添加延迟，以便在淡入淡出完成之前不会运行下一行代码？

我应该添加我的代码。见下文： -

var main = function(){
    $('.container-photos img').on({
        mouseover: function(){
            $(this).css({
                'cursor': 'pointer',
                'border-color': 'red'
            });
        },
        mouseout: function(){
            $(this).css({
                'cursor': 'default',
                'border-color': 'grey'               
            });
        },
        click: function() {
            var imageUrl = $(this).attr('src');


            var lastSeven = imageUrl.substr(imageUrl.length - 7); 

            var newUrl = "images/photos/large/image_00" + lastSeven;    

            switch(newUrl) {
                case "images/photos/large/image_00001.jpg":
                    divWidth = 166;
                    break;
                case "images/photos/large/image_00002.jpg":
                    divWidth = 166;
                    break;
                case "images/photos/large/image_00003.jpg":
                    divWidth = 166;
                    break;
                case "images/photos/large/image_00004.jpg":
                    divWidth = 375;
                    break;
                case "images/photos/large/image_00005.jpg":
                    divWidth = 213;
                    break;
                case "images/photos/large/image_00006.jpg":
                    divWidth = 157;
                    break;
                case "images/photos/large/image_00007.jpg":
                    divWidth = 147;
                    break;
                case "images/photos/large/image_00008.jpg":
                    divWidth = 364;
                    break;
                case "images/photos/large/image_00009.jpg":
                    divWidth = 166;
                    break;
                case "images/photos/large/image_00010.jpg":
                    divWidth = 171;
                    break;
                case "images/photos/large/image_00011.jpg":
                    divWidth = 166;
                    break;
                case "images/photos/large/image_00012.jpg":
                    divWidth = 166;
                    break;
                case "images/photos/large/image_00013.jpg":
                    divWidth = 368;
                    break;
                case "images/photos/large/image_00014.jpg":
                    divWidth = 166;
                    break;
                case "images/photos/large/image_00015.jpg":
                    divWidth = 375;
                    break;
                case "images/photos/large/image_00016.jpg":
                    divWidth = 166;
                    break;
                case "images/photos/large/image_00017.jpg":
                    divWidth = 166;
                    break;
                case "images/photos/large/image_00018.jpg":
                    divWidth = 375;
                    break;
                case "images/photos/large/image_00019.jpg":
                    divWidth = 166;
                    break;
                case "images/photos/large/image_00020.jpg":
                    divWidth = 166;
                    break;
                case "images/photos/large/image_00021.jpg":
                    divWidth = 166;
                    break;
                case "images/photos/large/image_00022.jpg":
                    divWidth = 166;
                    break;
                case "images/photos/large/image_00023.jpg":
                    divWidth = 166;
                    break;
                case "images/photos/large/image_00024.jpg":
                    divWidth = 166;
                    break;
                case "images/photos/large/image_00025.jpg":
                    divWidth = 142;
                    break;
                case "images/photos/large/image_00026.jpg":
                    divWidth = 143;
                    break;      
                default:
            }      

            $('.main-image').fadeOut(1000, function() {
                $(this).attr('src',imageUrl);
            });




            $('.main-image').css('margin-left','-' + divWidth+'px');    




            $('.main-image').fadeIn(1000, function() {
                $(this).attr('src',newUrl);
            }); 




        }
    });

}

$(document).ready(main);

Answer 1

是的，您可以执行以下操作：

function() {
 $(element).fadeOut(300);
 $(element2).delay(300).fadeIn(300);
}

或 （这是更好的选择，称为回调）

$(element).fadeOut(300, function() {
 $(element2).fadeIn(300);
});

Answer 2

这是如何运作的：

$(function() { // Shorthand for $(document).ready(function() {
      $('#element').delay(1000).fadeIn(2200);
      $('#element').delay(1200).fadeIn(2200);
});

$(function() { // Shorthand for $(document).ready(function() {
          $('#element').delay(1000).fadeOut(2200);
          $('#element').delay(1200).fadeOut(2200);
    });

Answer 3

您可以使用.delay() jQuery的功能：

$(el).fadeOut(500).delay(500).fadeIn(500);

您也可以在.fadeOut()函数中直接使用回调函数：

$(el).fadeOut(500, function() {
    $(this).fadeIn(500);
});

您可以使用.animate()：

$(el).animate({
    'opacity': 0
}, 'linear', function() {
    $(this).animate({'opacity': 1}, 'linear');
});

但请注意，.fadeOut()函数会在将CSS display属性设置为none *之后将CSS opacity属性设置为0。这个animate()函数只有不透明度的技巧。

^{* .fadeOut（）方法动画匹配元素的不透明度。一旦不透明度达到0，显示样式属性将设置为none，因此该元素不再影响页面的布局。}

Answer 4

我猜你正面临着试图编写同步代码的JavaScript的异步灵魂。

如果您正在撰写类似

的内容

$( '.domclass' ).fadeOut( 250, 'easeOutQuad' );
doSomething();
$( '.domclass' ).fadeIn( 500, 'easeInQuad' );

由于JavaScript的异步方法，这将无法正常工作。

你应该考虑使用回调

$( '.domclass' ).fadeOut( 250, 'easeOutQuad', function( e ) {

    // This code will be executed when the fadeOut ends
    doSomething();

    $( '.domclass' ).fadeIn( 500, 'easeInQuad', function( e ) {

        // This code will be executed when the fadeIn ends
        doSomethingElse();

    } );

} );

将异步方法应用于您的代码这就是您所获得的（如果我理解您想要实现的目标）：

        /* START of code excerpt */

        $('.main-image').fadeOut(1000, function() {
            $(this).attr('src',imageUrl);

            $(this).css('margin-left','-' + divWidth+'px');    

            $(this).fadeIn(1000, function() {

                $(this).attr('src',newUrl);

            }); 

        });

        /* END of code excerpt */

Jquery FadeIn / FadeOut延迟

4 个答案: