0

jQuery hoverIntentプラグインを使用して、別のdivがホバーされているときにdivをフェードインしています。クラス名を共有する4つの要素があり、クラスの子を共有するすべてのdivではなく、ホバーしている要素の子のみをフェードインしたいと思います。ここでの問題は、1回のダイビングにカーソルを合わせると、4つの要素すべての子がフェードインすることです。私のコードのどこで少し間違ったコードがありますか？

これがhtmlです：

<div id="resources" class="faded">

<div class="resourcesHover"></div>

</div>

<div id="forBuilders" class="faded">

<div class="buildersHover"></div>

</div>

<div id="fam" class="faded">

<div class="famHover"></div>

</div>

<div id="homePlans" class="faded">

<div class="plansHover"></div>

</div>

これがjQueryです

$(document).ready(function(){

$(".faded").hoverIntent({
    over:    fadeDivIn,
    timeout: 300,
    out:     fadeDivOut
});

function fadeDivIn() {
    var $kids = $('.faded').children();
    $($kids, this).fadeIn('slow');
}

function fadeDivOut() {
    var $kids = $('.faded').children();
    $($kids, this).fadeOut('slow');
}

});

誰かが同様の問題を抱えている場合に備えて、私は解決策を見つけて以下に投稿しました。

4

3 に答える 3

0

fadeDivInおよびfadeDivOut関数を次のように変更します。

function fadeDivIn() {
    var $kids = $(this).children();
    $($kids).fadeIn('slow');
}

function fadeDivOut() {
    var $kids = $(this).children();
    $($kids).fadeOut('slow');
}
于 2012-10-29T18:37:36.637 に答える
0

フェードインおよびフェードアウト関数でthisは、クラスのすべての要素の代わりに選択する必要がありますfaded

$(document).ready(function(){

$(".faded").on('mouseover', function() {
    fadeDivIn(this);
});

$(".faded").on('mouseout', function() {
    fadeDivOut(this);
});

function fadeDivIn(hovered_over) {
    var $kids = $(hovered_over).children();
    $($kids).fadeIn('slow');
}

function fadeDivOut(hovered_over) {
    var $kids = $(hovered_over).children();
    $($kids).fadeOut('slow');
}

});
于 2012-10-29T18:39:00.693 に答える
0

ちょうどそれを理解しました。子を変数に設定する行にaを追加しthis,、.fadeIn行と.fadeOut行からも削除しました。

新しいjQueryは次のとおりです。

$(document).ready(function(){

$(".faded").hoverIntent({
    over:    fadeDivIn,
    timeout: 300,
    out:     fadeDivOut
});

function fadeDivIn() {  
    var $kids = $(this,'.faded').children();
    $($kids).fadeIn('slow');
}

function fadeDivOut() {
    var $kids = $(this,'.faded').children();
    $($kids).fadeOut('slow');
}

});
于 2012-10-29T19:20:49.950 に答える