将淡化效果添加到jquery翻转

Question

我有这个小脚本通过观察包含_off / _on后缀的图像来完成翻转。效果很好，但我想要做的就是使用淡入淡出功能来完善它。对不起，如果这真的是少年（感觉就像）：/

我很想让它像这样简单。

<script type="text/javascript">
    $(document).ready(function() {
    $("img.rollover").hover(
    function() { this.src = this.src.replace("_off", "_on");
    }, 
    function() { this.src = this.src.replace("_on", "_off");
    });
    });
</script>

Answer 1

$(function(){

    var a = '_off',
        b = '_on';

    $('img.rollover').on({
        'mouseover': function() {
            $(this).fadeOut(500, function() {
                $(this).prop('src', $(this).prop('src').replace(a, b)).fadeIn(500);
            });
        },
        'mouseout': function() {
            $(this).fadeOut(500, function() {
                $(this).prop('src', $(this).prop('src').replace(b, a)).fadeIn(500);
            });
        }
    });​
 });

A sample fiddle

这应该很好。