Question

当您将鼠标悬停在按钮上时，我想在背景图像上应用fadeIn和fadeOut效果。以下是我想要做的一个示例：http://jsfiddle.net/kevinPHPkevin/4z2zq/

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

第二个是应用＆＃34;轻松进入＆＃34; jQuery中.css部分的转换。但是，这似乎并没有触发轻松过渡。

第三个是添加＆＃34; fadeIn（）＆＃34;和＆＃34; fadeOut（）＆＃34;使用jQuery，但我不确定为什么它在悬停时不会触发第二个背景图像的淡入淡出。以下是我正在使用的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

从您的代码段中，您需要将鼠标悬停在按钮上并使div切换其可见性，如果是这样的话：

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

尝试here和LMK

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

1 个答案: