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 + ")");
    }); 
});

顺便说一句……问题是这个“过渡/改变”不是很顺利，它像“ Spark ”一样刷新页面时出现。所以这不是一个好的表达方式。 谁能告诉我我该怎么做才能解决这个问题？ 谢谢...

Answer 1

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

选项 1:jQuery on 悬停委托(delegate)(对于动态加载的元素)

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();
});

---

方案二: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