1

http://ngmat.site90.net/にアクセスし、左上隅にテキストが表示されている小さな黒いボックスにマウスを合わせると、すべてのテキストが表示されるように拡大されます。それは私が今望んでいることを正確に実行しますが、それは非常に奇妙な方法で実行します。アニメーションが何度も繰り返されることもありますが、なぜそうなのかわからないので、自分で見る必要があると思います。

編集：高さが「自動」に設定されている場合、divの高さを取得するために思いついた小さなハックを使用しました。これが問題になる可能性がありますか？

これがJavaScriptです

$(document).ready(function(){
    var idagHeight = parseInt($("#idag").css('height'));
    var idagWidth = parseInt($("#idag").css('width'));
    var idagPopUpLeft = parseInt($("#idagPopUp").css('left'));

    $("#idag").css({"height": "auto", "width": idagWidth+30});
    var idagTempHeight = $("#idag").height();
    $("#idag").removeAttr("style");


    $("#idag").mouseover(function(){
        $(this).animate({height: idagTempHeight, width: idagWidth+30}, 300);
        $("#idagPopUp").animate({left: idagPopUpLeft+30}, 300);
    });
    $("#idag").mouseout(function(){
        $(this).animate({height: idagHeight, width: idagWidth}, 300, function(){$("#idag").removeAttr("style");});
        $("#idagPopUp").animate({left: idagPopUpLeft}, 300);
    });
});
4

2 に答える 2

2

#idag 内の子にカーソルを合わせると、mouseout イベントがトリガーされます。div をアニメーション化すると、マウスが子から離れるため、mouseover イベントが再びトリガーされます。を使用してこれを防ぐことができます

e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

ハンドラー内。

また、アニメーションのキューが長くなるのを防ぐために、.animate() の前に .stop() を呼び出すことをお勧めします。

于 2012-04-24T20:28:30.823 に答える
1

代わりにこれを使用できます：

$(document).ready(function(){
    var idagHeight = parseInt($("#idag").css('height'));
    var idagWidth = parseInt($("#idag").css('width'));
    var idagPopUpLeft = parseInt($("#idagPopUp").css('left'));

    $("#idag").hover(function(){
        $(this).stop().animate({height: "+=30", width: "+=30"}, 300);
        $("#idagPopUp").stop().animate({left: "+=30"}, 300);
    }, function(){
        $(this).stop().animate({height: idagHeight, width: idagWidth}, 300);
        $("#idagPopUp").stop().animate({left: idagPopUpLeft}, 300);
    });
});

または、最終的なブロックの高さがわからない場合は、最初のアニメーション関数を次のように変更できます。 

$(this).stop().animate({width: "+=30"}, 300, function() {
    $(this).css("height", "auto");
});
于 2012-04-24T20:30:00.173 に答える