使用 JQuery 转换背景图像时出现问题

Question

编辑

我发现它实际上正在淡出，它只是在开始淡入淡出之前删除了背景图像，所以我看不到它...呃。我刚刚删除了 .css('background','') 所以它现在淡出。我的一些 css 样式仍然没有影响它。它以某种方式获得了 background-repeat: initial; 覆盖 class 样式。这是因为 js 正在作用于它的样式吗？

原文：

我已经阅读了这里的其他一些问题，它们帮助我走到了这一步，但我仍然没有找到解决方案。

我在悬停时淡化背景图片时遇到了问题。我将图像 url 存储为 link 列表的数据属性。当您将鼠标悬停在 link 上时，另一个 div 的背景将通过 jquery.

设置为各自的图像

我已经得到要分配的背景图像，添加了一个 class 使其可见。它可以淡入淡出，但不能淡出。当我在 chrome 开发工具中手动删除可见性 class 时，它会按预期淡出，但当 jquery 删除它时则不会。除非我添加 !Important，否则其他 "background-" css 样式也不起作用。不过我不知道是什么压倒了它们。

JSFiddle

HTML

<div class="backdrop"></div>
<ul>
    <li><a href="#" class="item" data-img="http://goo.gl/hbKhMi">one</a></li>
    <li><a href="#" class="item" data-img="http://goo.gl/7p0Kki">two</a></li>
    <li><a href="#" class="item" data-img="http://goo.gl/EHW4Xs">three</a></li>
</ul>

CSS

.backdrop {
    width:450px;
    height:400px;
    opacity: 0;
    -webkit-transition: opacity 0.75s;
    transition: opacity 0.75s;
    background-position:center;
    background-repeat: no-repeat;
}

.visable{
      opacity:1;
}

JS

$(document).ready(function() {
    $('.item').mouseenter(function() {
        $('.backdrop').css('background','url('+$(this).data("img")+')').addClass('visable');
    });
    $('.item').mouseleave(function() {
        $('.backdrop').css('background', '').removeClass('visable');
    });
});

Answer 1

您需要稍微更改一下您的 JS 代码，使用 backgroundImage 而不是 background 来设置图像，当 mouseleave 时，不要删除 backgroundImage , 只有 class。应该是：

$(document).ready(function() {
    $('.item').mouseenter(function() {
        $('.backdrop').css('backgroundImage','url('+$(this).data("img")+')').addClass('visable');
    });
    $('.item').mouseleave(function() {
        $('.backdrop').removeClass('visable');
    });
});

FIDDLE: https://jsfiddle.net/lmgonzalves/y2v9sa4h/8/

使用 JQuery 转换背景图像时出现问题

Trouble with transitioning background Image with JQuery

html

javascript

css

jquery

css-transitions

编辑

JSFiddle

HTML

CSS

JS