2

私の問題を紹介する JSFiddle ( http://jsfiddle.net/wpC57/2 ) を作成しました。

#grid-viewer に display: none; を表示させたい。ページが読み込まれます。次に、リンクのいずれかにカーソルを合わせると、それに応じてフェードインして再配置します。

現在、再配置は意図したとおりに機能していますが、フェードインとフェードアウトに問題があります。フェードアウトした後、再びフェードインすることはありません。どんな助けでも大歓迎です。

ホバリング機能を処理する JavaScript は次のようになります。

$("a.mainlink").hover(function() {
    var dataTitle = $(this).attr("data-title");
    $("#grid-viewer").stop().fadeIn();
    $("#grid-viewer").stop().animate({
        "left": ($(this).offset().left - $("#grid-view").position().left)
    }, 200);
    $("#grid-text").html(dataTitle);
}, function() {
    $("#grid-viewer").stop().fadeOut();
});
4

2 に答える 2

2

あなたは2番目を削除する必要があります、それはそれが始まった直後に.stop()ブロックしています。fadeIn()

于 2012-12-21T14:11:32.437 に答える
2

あなたはそれを次のように見えるようにします：$("#grid-viewer").stop().fadeIn();しかし、すぐにフェードインを停止し$("#grid-viewer").stop().animate({ます。そのため、不透明度は0のままで、非表示になります。次のように、フェードの機能不全をアニメーションに含めてみてください。

$("#grid-viewer").stop().animate({
            "display" : "block",
            "opacity": 1,
            "left": ($(this).offset().left - $("#grid-view").position().left)
        }, 200);

完全なサンプル： http： //jsfiddle.net/wpC57/7/

$(document).ready(function() {
    $("a.mainlink").hover(function() {
        var dataTitle = $(this).attr("data-title");
        $("#grid-viewer").show();
        $("#grid-viewer").stop().animate({
            "opacity": 1,
            "left": ($(this).offset().left - $("#grid-view").position().left)
        }, 200);
        $("#grid-text").html(dataTitle);
    }, function() {
        $("#grid-viewer").stop().fadeOut();
    });
});​
于 2012-12-21T14:12:30.890 に答える