将淡入淡出添加到此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转换的类似乎更容易。