时间戳

首页 > 解决方案 > 悬停时淡入背景图像

javascript - 悬停时淡入背景图像

问题描述

将鼠标悬停在文本上时，我有 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();
    });
});

更新：谢谢大家的回答。

我想要的效果是这样的： https ://www.christinewalthall.com/work

当您将鼠标悬停在文本上时，背景图像将发生变化。我已经设法做到了，但是图像变化太快了。我希望添加效果，使图像不会发生显着变化。

标签： javascriptjquery

解决方案

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

$(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>

推荐阅读