0

aタグに2つの画像があります

<a>
<img src="blabla.jpg" class="VisibleImage" />
<img src="lolo.jpg" class="HoverImage" />
</a>

デフォルトでは、クラスのある画像VisibleImageが表示されて非表示HoverImageになりますが、誰かがaタグにカーソルを合わせるVisibleImageと非表示にHoverImageなり、表示されます。

私はこのcssを使用しています：

a .VisibleImage{display:block}
a .HoverImage{display:none}

 //on hover
a:hover .VisibleImage{display:none}
a:hover .HoverImage{display:block}

しかし、私は次のようなアニメーションSlide upが必要です。css3を使用しようとしましたが、機能しませんでした。jQueryに移動してjQueryを使用hover()しましたが、失敗しました。jQueryコードを教えてください

4

2 に答える 2

1

これで、slideUp() で何を達成したいのかわかりませんが、これは機能します。

$(document).ready(function(){
    $('.HoverImage').slideUp();
$('a').bind('mouseenter', function() {
    $(this).find('.HoverImage').slideUp().fadeOut('slow', function() {
        $(this).parent().find('.VisibleImage').slideDown().fadeIn('slow');
    })
});
$('a').bind('mouseleave', function() {
    $(this).find('.VisibleImage').slideUp().fadeOut('slow', function() {
        $(this).parent().find('.HoverImage').slideDown().fadeIn('slow');
    })
});​
});

http://jsfiddle.net/shannonhochkins/QxyH3/

乾杯、シャノン

于 2012-09-27T12:23:36.493 に答える