Question

当在文本上悬停时，我有jquery来更改背景图像。我想添加淡入效果。

这是我现在拥有的代码：

$(document).ready(function(){
    $("#anatomyNow").hover(function(){
        $("#bg").css("background-image",    "url(image/anatomyNow5.png)");
        }, function(){
        $("#bg").css("background-image",    "url(image/anatomyNow5.png)");
        });
});

我试图在下面添加代码，但是它不起作用。

$(document).ready(function(){
    $("#anatomyNow").hover(function(){
        $("#bg").fadeIn();
    });
});

更新：谢谢大家的回答。

我想要的效果是这样的： Unicode/multi-language support for grammar specs #14

将鼠标悬停在文本上时，背景图像将改变。我已经做到了，但是图像变化太快。我希望增加效果，以使图像不会发生太大变化。

Answer 1

fadeIn对元素的不透明度进行动画处理，因此在这种情况下使用它将不起作用。

在这里实现您想要的功能可能有不止一种方法，但是想到的是将图像/ div与背景图像彼此叠加，并在悬停时使用css不透明度过渡。

我为您做了一些谷歌搜索，以下资源显示了如何执行此操作： http://css3.bradshawenterprises.com/cfimg/

Answer 2

如果我没有误解您的要求，那么这就是您想要的。

$(document).ready(function() {
  $("#effect").hover(function() {
    $(this).animate({
      opacity: '1'
    }, "slow");
  }, function() {
    $(this).animate({
      opacity: '0.5'
    }, "slow");
  });
});

#effect {
  padding: 0.4em;
  background: #555 url("https://thumb9.shutterstock.com/display_pic_with_logo/77318/1007648908/stock-photo-sunrise-beam-in-the-beautiful-park-1007648908.jpg");
  opacity: 0.5;
}

#effect {
  max-width: 490px;
  height: 320px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="effect" class="ui-widget-content ui-corner-all"></div>

悬停时在背景图像中消失

2 个答案: