如何在 jQuery 悬停时应用背景淡入淡出过渡？答案

【问题标题】：How to apply background fade transition on hover in jQuery?如何在 jQuery 悬停时应用背景淡入淡出过渡？
【发布时间】：2018-03-15 18:39:23
【问题描述】：

当您将鼠标悬停在按钮上时，我想在背景图像上应用淡入淡出效果。这是我想做的一个例子：http://jsfiddle.net/kevinPHPkevin/4z2zq/

我尝试应用三种不同的方式来应用这种技术。我首先在 CSS 中使用关键帧进行了尝试，但由于背景图像的设置方式，我发现此解决方案无效。

第二个是在 jQuery 的 .css 部分中应用“缓入”过渡。但是，这似乎不会触发缓入过渡。

第三个是使用 jQuery 添加“fadeIn()”和“fadeOut()”，但我不确定为什么它不会在悬停时触发第二个背景图像的淡入淡出。这是我正在使用的代码：

$(document).ready(function() {
  //Preload
  $('<img/>').hide().attr('src', 'https://images.unsplash.com/photo-1517164976876-978dd0f4f6fe?ixlib=rb-0.3.5&s=e84eb8d852ae0be5f5561be594ca6d46&auto=format&fit=crop&w=1352&q=80').load(function() {
    $('#main').append($(this));
  });

  $('.button').hover(function() {
    $('#main').css({
      'background-image': 'url("https://images.unsplash.com/photo-1517164976876-978dd0f4f6fe?ixlib=rb-0.3.5&s=e84eb8d852ae0be5f5561be594ca6d46&auto=format&fit=crop&w=1352&q=80")',
      'OTransition': 'opacity 2s ease-in',
      'MsTransition': 'opacity 2s ease-in',
      'MozTransition': 'opacity 2s ease-in',
      'WebkitTransition': 'opacity 2s ease-in',
      'transition': 'opacity 2s ease-in'
    });
  }, function() {
    $('#main').css('background', '');
  });
  /*$('.button').hover(function() {
        $('#main').fadeIn(); 
      }, function() { 
      $('#main').fadeOut(); 
  });*/
});

body {
  font-family: 'Roboto', sans-serif;
}

h1 {
  position: relative;
  right: 150px;
  color: white;
  font-size: 54px;
  width: 5000px;
}

#background #main {
  background-position: center top;
  background-repeat: no-repeat!important;
  height: 463px;
  width: 100%;
  background-size: 1600px auto;
  background-image: url('https://images.unsplash.com/photo-1519116678967-5b71031f2c9d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=acf40632c2b8b79e0d902e6f782f06c7&auto=format&fit=crop&w=1350&q=80');
}

.wrap {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100px;
  width: 200px;
  margin: auto;
}

.button {
  background-color: transparent;
  border: 2px solid tomato;
  border-radius: 4px;
  display: inline-block;
  color: tomato;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  height: 40px;
  line-height: 40px;
  letter-spacing: 1px;
  margin: 5px;
  overflow: hidden;
  padding: 0 22px;
  text-align: center;
  text-transform: uppercase;
  transition: all .2s ease-in-out;
}

.button:hover {
  background-color: tomato;
}

.roll-text {
  display: block;
  position: relative;
  transition: all 420ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.roll-text:last-child {
  color: #fff;
}

.rollover:hover .roll-text:first-child {
  margin-top: -38px;
}

<body>
  <div id="background">
    <div id="main" class="printer">

      <div class="wrap">
        <h1>Hover over button!</h1>
        <a class="button rollover">
          <span class="roll-text">Hover Me</span>
          <span class="roll-text">Let's Go</span>
        </a>
      </div>

    </div>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【问题讨论】：

标签： jquery html css

【解决方案1】：

从您的 sn-p 中，您需要将鼠标悬停在一个按钮上并让 div 切换其可见性，如果是这样的话：

$('button').hover(function() { 
    $('#div1').fadeIn();
    $('#div2').fadeOut(); 
}, function() { 
    $('#div2').fadeIn();
    $('#div1').fadeOut();
});

试试here 和 LMK

【讨论】：