Question

我有一个灰度图像，所以当使用jQuery mouseenter时，它会变为彩色版本。这是我的代码......

$(function(){
    $(document).on('mouseenter', '.items', function() {
        img = $(this).data('img');
        img2 = img.replace(".", "C.");
        $(this).css("background-image", "url(img/" + img2 + ")");
    }).on('mouseleave', '.items', function() {
        $(this).css("background-image", "url(img/" + img + ")");
    }); 
});

顺便说一句......问题在于这种“转换/改变”并不是一种平滑的方式，它就像一个页面被刷新的页面就像一个“火花”。所以不是一个很好的演示方式。任何人都可以告诉我，我该怎么做才能解决这个问题？感谢名单...

Answer 1

可以通过许多不同的方式在图像之间平滑过渡，这里有三个......

选项1：用于悬停的jQuery on委托（用于动态加载的元素）

jsfiddle example

<div id="container">
    <div class="img-transition bw"></div>
    <div class="img-transition color"></div>
</div>

$('body').on('mouseenter', '#container', function() {
    $('.color', this).fadeIn();
}).on('mouseleave', '#container', function() {
    $('.color', this).fadeOut();
});

选项2：jQuery hover事件解决方案（不动态加载元素）

jsfiddle example

<div id="container">
    <div class="img-transition bw"></div>
    <div class="img-transition color"></div>
</div>

var $container = $('#container'),
    $color = $('.color');

$container.hover(function() { // mouseover
    $color.fadeIn();
}, function() { // mouseout
    $color.fadeOut();
});

选项3：CSS3 transition属性

jsfiddle example

<div id="container">
    <div class="img-transition bw"></div>
    <div class="img-transition color"></div>
</div>

.color{
    background-position:-47px -47px;
    opacity: 0;
    -webkit-transition: 400ms linear;
}
.color:hover {
    opacity: 1;
}

transition有良好的support

Answer 2

我正在使用fadeIn-fadeOut方式：

<强> HTML

<div class="cont">
   <img src="http://placehold.it/350x350" />
   <img class="color" src="http://placehold.it/350x350/00adee/ff5400" />
</div>`

<强> CSS

.cont {
    width: 350px;
    height: 350px;
    position: relative;
}
.cont .color {
    position: absolute;
    top: 0;
    left: 0;
    display: none;  
}

<强> JS

$(function(){
    $(document).on('mouseenter', '.cont', function(){
        $('img.color', $(this)).fadeIn(1000);

    }).on('mouseleave', function(){
        $('img.color', $(this)).fadeOut(1000)
    }) 
})

http://jsfiddle.net/gwgB7/

如何使CSS更改顺利？

2 个答案: