Question

我在a标记

中有两张图片

<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代码

Answer 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/

干杯，香农

Answer 2

使用css3过渡来获得类似幻灯片的动画

.HoverImage{
  max-height:0px;
  height:auto;
  -webkit-transition: max-height 2s;
  display:none;
}

a:hover .HoverImage{
   display:block;
    max-height:500px;
}

css3过渡教程

http://www.w3schools.com/css3/css3_transitions.asp

jQuery悬停显示图像与动画

2 个答案: