jquery - 如何使 CSS 更改平滑？

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：悬停的 jQueryon委托（用于动态加载的元素）

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：jQueryhover事件解决方案（针对非动态加载的元素）

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过渡属性

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有很好的支持

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/