向此 jQuery 翻转添加淡入淡出 [重复]

Question

我如何为这段 jQuery 添加淡入淡出或动画不透明度变化？

谢谢

<script  type='text/javascript'>
$(document).ready(function(){
    $(".alain").hover(
        function() {$(this).attr("src","images/rollovers/alain-rollover.png");},
        function() {$(this).attr("src","thumbnails/alain-thumbnail.jpg");
    });
});
</script>

Answer 1

淡出图像，更改源，淡入图像：

$(document).ready(function(){
    $(".alain").on('mouseenter mouseleave', function(e) {
        var src = e.type == 'mouseenter' ? 'images/rollovers/alain-rollover.png' : 'thumbnails/alain-thumbnail.jpg';

        $(this).fadeOut('slow', function() {
            $(this).prop('src', src).fadeIn('slow');
        });
    });
});

jsbin

如果旧浏览器不成问题，添加和删除带有 CSS3 过渡的类似乎更容易。