jquery - 悬停显示带有动画的图像的jQuery

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