javascript - 为这个 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 过渡的类似乎更容易。