2

由于某种原因，代码的行为很奇怪。这发生在 If Else 函数中。在 Else 部分，它应该在 1000 毫秒内淡出，然后删除该类，然后继续下一条语句。但显然第二个语句首先被调用，它使一切变得糟糕。:( 。

$(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);

}
});
});

请帮忙 ：（。

4

3 回答 3

3

你的代码：

$(".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);
});
于 2012-05-20T15:30:45.103 回答
1

您可能希望淡入与淡出同时发生，对吗？在这种情况下，您需要像这样缓存查询结果：

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

您的问题是 removeClass("sborder") 正在删除您添加到 $(".sub" + name) 的 sborder 类，因为它发生在 1 秒后。换句话说，事情发生的顺序如下：

  1. 开始淡出目前有一类“sborder”的东西
  2. 将“sborder”类添加到 $(".sub" + name)
  3. 开始淡入 $(".sub" + name)
  4. 在第 1 项之后 1 秒。开始淡出从现在具有“sborder”类的每个元素中删除“sborder”类，该类现在包括由于第 2 项而由 $(".sub" + name) 返回的每个元素。

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

  • 只要有可能，请尝试始终从具有 id 或标记名 ( $('#container .sborder') ) 的内容中向下钻取。在旧浏览器中按类搜索可能会非常慢，添加一些上下文意味着 jQuery 不必搜索整个文档。
  • 只要有可能，尽量缓存您的查询结果。每次调用 $('.something') 时，它都会查询 DOM。因此，如果您将结果缓存在一个变量中，则只需进行一次查询。显然，只有在您知道 DOM 在此期间没有更改时才这样做。在我们的例子中，我们知道 DOM 发生了变化，但我们只想影响一秒钟前有“sborder”的元素。
于 2012-05-20T15:47:49.740 回答
0 
$(".sborder").fadeOut(1000, function() { 
    $(this).removeClass("sborder"); // $(this) is enough to refer to current $('.sborder')
    $(".sub"+name).addClass("sborder").fadeIn(1000);
});
于 2012-05-20T15:56:14.807 回答