jquery - 为 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);
            });
        }
    });​
 });

一个样本小提琴

这应该运作良好。