-1

私は現在、この小さなjQueryスニペットを使用して、特定の要素にカーソルを合わせるとdivをフェードイン/フェードアウトしています。

$(".wall-block-content").hover(function(){
    $(this).stop().animate({'opacity':'1'},300); //stop for preveting conflict
},function(){
    $(this).stop().animate({'opacity':'0'},300); //100 for time/speed
});

「.wall-block-content」divを非表示にする必要があるときに、ページの読み込み時に表示されるという事実を除けば、うまく機能します。

役立つ場合に備えて、サンプルのマークアップを次に示します。

<div class="grid-block">

   <img src="images/thumbnail.jpg"/>

    <div class="wall-block-content">

        <!-- SOME FANCY CONTENT HERE -->

    </div><!--/.wall-block-content-->

</div><!--/.grid-block-->

したがって、基本的にページの読み込み時に表示されるのは、thumbnail.jpg 画像だけであり、誰かがその画像にカーソルを合わせると、.wall-block-content div がその上にフェードインします...

何か案は？

4

3 に答える 3

1

fadeIn()とを使用fadeOut()する方がよいでしょう。

$('#imgtest').hover(function(){
    $('.wall-block-content').fadeIn('slow');

},function(){
    $('.wall-block-content').fadeOut('slow');
});

デモ

于 2013-01-27T21:06:36.983 に答える
0

jQuery 関数 .fadeIn() と .fadeOut() を使用しないのはなぜですか?

http://api.jquery.com/fadeIn/
http://api.jquery.com/fadeOut/

ご質問へ:
.wall-block-content { display: none; }

于 2013-01-27T20:56:49.237 に答える
0

CSS:

.wall-block-content {display:none}

jQuery:

$('#imgtest').hover(function(){
    $('.wall-block-content').fadeToggle();
});

また、fadeToggle('slow') のような期間を追加することもできます

于 2013-01-27T21:10:05.740 に答える