2

何らかの理由で、コードが奇妙に動作しています。これは、IfElse関数で発生します。その他の部分では、1000ミリ秒を超えてフェードアウトし、クラスを削除してから次のステートメントに進むことになっています。しかし、どうやら2番目のステートメントが最初に呼び出され、すべてが悪くなります。:(。

$(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. $(".sub" + name) に "sborder" のクラスを追加
  3. $(".sub" + name) でフェードインを開始
  4. アイテム 1 の 1 秒後。アイテム 2 により、現在$(".sub" + name) によって返されるすべての要素を含む "sborder" のクラスを持つすべての要素から "sborder" のクラスを削除します。

jQueryを使用する場合のベストプラクティスについて...

  • 可能な限り、常にID またはタグ名 ( $('#container .sborder') )を持つものからドリルダウンするようにしてください。クラスによる検索は、古いブラウザーでは非常に遅くなる可能性があり、コンテキストを追加すると、jQuery がドキュメント全体を検索する必要がなくなります。
  • 可能な限り、クエリ結果をキャッシュするようにしてください。$('.something') を呼び出すたびに、DOM を照会しています。したがって、結果を変数にキャッシュする場合は、クエリを 1 つだけ実行する必要があります。明らかに、その間に DOM が変更されていないことがわかっている場合にのみ、これを行ってください。ここでのケースでは、DOM が変更されたことはわかっていますが、1 秒前に「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 に答える