Question

我正在做这样的事情：

case ：当我点击添加链接时，它应该删除Div和Fadeout上的类样式，然后它应该添加一个类然后添加fadein。但问题是它删除了类，然后添加类然后执行淡出和淡入淡出。为什么在淡出之前添加类？

这是我的代码

$(function(){
    $('#noti1').click(function() {
        $('#blue').removeClass( "ui-state-highlight").fadeOut(1000, mossawir);

        function mossawir() {
            setTimeout(function() {
                $( "#effect" ).addClass( "newClass" );
            }, 1500);
        }

        $('#blue').addClass("ui-state-error").fadeIn('slow');
     });
});

我甚至尝试了一种更简单的方法：

$(function() {
    $('#noti1').click(function() {
        $('#blue').removeClass( "ui-state-highlight").fadeOut('slow');
        $('#blue').addClass("ui-state-error").fadeIn('slow');
    });
});

Answer 1

这是因为fadeOut()和fadeIn()等动画方法是异步：它们会立即返回并稍后执行其工作。

由于异步方法在完成之前返回，它们通常采用回调函数参数，当执行时它们被调用。在您的情况下，您只需在fadeIn效果完成时运行fadeOut动画，即在其回调中：

$("#noti1").click(function() {
    $("#blue").removeClass("ui-state-highlight").fadeOut("slow", function() {
        $(this).addClass("ui-state-error").fadeIn("slow");
    });
});

Answer 2

它会在您淡出之前添加该类，因为这正是您告诉它要做的。

jQuery的常规方法不会作为动画队列的一部分处理，它们会立即执行。

你可以尝试：

$('#blue')
   .removeClass('ui-state-highlight')
   .fadeOut(1000, mossawir)
   .queue(function() {
       $(this).addClass('ui-state-error')
       $(this).dequeue();
   })
   .fadeIn('slow');

将类更改作为动画队列的一部分插入。

注意：此方法会保留您现有的完成回调（mossawir），以便在newClass完成后添加.fadeOut效果。其他答案不允许（还）。

jquery在应用fadeOut（）之前应用.addClass（）

2 个答案: