-4

それぞれ別々のdivに5つの異なる画像のシーケンスがあります。これらの下に、ホバーした画像に応じてテキストを入力する予定の別のdivがあります。

アイデアは、ホバーすると各画像がこのテキストdivに関連情報を入力するというものです。また、このdivをアニメーション化して、高さ0から開始し、150ピクセルに拡張してからテキストを追加し、マウスを画像から移動すると折りたたまれるようにします。

この領域の下にフッターがあるので、それを非表示にして、ホバーしたときに表示することはできません。

JavaScript / JQueryでこれを行うためのきちんとした方法はありますか？

ありがとう

編集：

私はこれを解決するために自分で何かをまとめましたが、いくつかの問題があります

$(document).ready(
    function(){    
        $("#upper").hover(
            function(){
                $('#caption').animate({'height': '150px'}, 1500);
                $('#caption').html('Tesrtssadwa');
            }, 
            function(){
                $('#caption').stop().animate({'height': '0px'}, 1500);
            }
        );
}
);

ですから、これは私が望んでいることとほぼ同じですが、いくつかの問題があります。divにすばやく数回カーソルを合わせると、アニメーションがキューに入れられます。理想的にはこれが起こらないようにしたいと思います。これを行う簡単な方法はありますか、それともその価値よりも面倒ですか？

また、ある時点でdivを折りたたむことができましたが、テキストはまだ表示されていました。これを再現することはできませんが、divが折りたたまれたときにテキストをフェードさせる方法はありますか？

$('#caption').html('');

少し悪いようです

編集：私はそれを再現することができます。画像が完全に拡大するまで画像にカーソルを合わせてから画像から移動すると、divが折りたたまれ、テキストが再表示されます。

4

1 に答える 1

4

あなたはおそらく、 mouseover、mouseout、slideDown、およびslideUp関数に興味があるでしょう。私が正しく理解していれば、このようなものがあなたが探しているものです：

$("#picture1").mouseover(function() {
        $("#textdiv").slideDown().html("This is information about picture 1. It is the first picture."
}).mouseout(function() {
        $("#textdiv").slideUp();
});

$("#picture2").mouseover(function() {
        $("#textdiv").slideDown().html("This is information about picture 2. It is the second picture."
}).mouseout(function() {
        $("#textdiv").slideUp();
});

$("#picture3").mouseover(function() {
    $("#textdiv").slideDown().html("This is information about picture 3. It is the last picture."
}).mouseout(function() {
    $("#textdiv").slideUp();
});
于 2012-07-06T13:22:17.603 に答える