Question

由于某种原因，代码表现得很奇怪。这在If Else函数中发生。在Else部分，它应该超过1000毫秒fadeOut然后删除Class然后进入下一个语句。但显然第二个声明首先被召唤出来，这让一切变得糟糕。 :(。

$(function() {

$(document).click(function(e) {
    if((e.target.id == 'RWorld') || (e.target.id == 'abc'))
    { 
    $(".sborder").fadeOut(1000, function() {

    $(".sborder").removeClass("sborder");
    });
    }

});




$("div#inner").children().click(function() {


//$("div#inner .sborder").removeClass("sborder");

var name = $(this).attr('id');

//alert($("div#inner").find("div").hasClass("sborder"));
if($(".sub"+name).hasClass("sborder"))
{
    $(".sub"+name).fadeOut(300, function() {
    $(".sub"+name).removeClass("sborder");
    });
}
else
{



    $(".sborder").fadeOut(1000, function() { 
    $(".sborder").removeClass("sborder");});       // The Problem is in here. This piece of Code doesnt work exactly as i thought it would ...

    $(".sub"+name).addClass("sborder").fadeIn(1000);

}
});
});

请帮忙:(。

Answer 1

您的代码：

$(".sborder").fadeOut(1000, function() { 
$(".sborder").removeClass("sborder");});
$(".sub"+name).addClass("sborder").fadeIn(1000);

正确缩进：

$(".sborder").fadeOut(1000, function() { 
    $(".sborder").removeClass("sborder");
});
$(".sub"+name).addClass("sborder").fadeIn(1000);

你可能想要什么：

$(".sborder").fadeOut(1000, function() { 
    $(".sborder").removeClass("sborder");
    $(".sub"+name).addClass("sborder").fadeIn(1000);
});

Answer 2

你可能希望fadeIn与淡出同时发生，对吗？在这种情况下，您需要缓存查询结果，如下所示：

var $sborder = $(".sborder");
$sborder.fadeOut(1000, function() {
    $sborder.removeClass("sborder");
});
$(".sub" + name).addClass("sborder").fadeIn(1000);

你的问题是removeClass（“sborder”）正在删除你添加到$（“。sub”+ name）的sborder类，因为它发生在1秒后。换句话说，事情发生的顺序如下：

开始淡出目前有一类“sborder”
将“sborder”类添加到$（“。sub”+ name）
开始淡入$（“。sub”+ name）
在第1项之后1秒开始淡出从现在具有“sborder”类的每个元素中删除“sborder”类，现在包括$（“。sub”返回的每个元素“+ name”因为第2项。

在最佳实践说明中，使用jQuery时...

尽可能尝试始终从具有id或标记名（$（'＃container .sborder'））的内容深入挖掘。在旧浏览器中按类搜索可能非常慢，添加一些上下文意味着jQuery不必搜索整个文档。
尽可能尝试缓存查询结果。每当你调用$（'。something'）时，它就会查询DOM。因此，如果将结果缓存在变量中，则只需要进行一个查询。显然，如果你知道DOM在过渡期间没有改变，那么只能这样做。在我们这里的情况下，我们知道DOM已经改变，但我们只想影响一秒钟之前有“sborder”的元素。

Answer 3

$(".sborder").fadeOut(1000, function() { 
    $(this).removeClass("sborder"); // $(this) is enough to refer to current $('.sborder')
    $(".sub"+name).addClass("sborder").fadeIn(1000);
});

jQuery代码以意想不到的方式进行

3 个答案: