Jquery背景图像淡出答案

【问题标题】：Jquery Background Image FadeOutJquery背景图像淡出
【发布时间】：2016-09-01 23:19:04
【问题描述】：

我有一个小问题。所以我正在制作有输入的网站，如果你粘贴 URL，背景图像会改变。它正在发生变化，但问题是背景只是闪烁并且看起来很糟糕。我用淡入/淡出尝试了一些东西，但没有像我预期的那样工作。另一个问题是当我单击按钮时背景突然消失，直到我粘贴一个新 URL。

    $('#bg-btn').click(function(){
    $('#bg-toggle').slideToggle('slow');
    $('#bg-url').keyup(function(){
        var value = $(this).val();
        $('#main-bg').css('background-image', 
        'url("' + value + '")');
    }).keyup();
});

【问题讨论】：

标签： javascript jquery html css background

【解决方案1】：

对于第二个问题，您已经在代码末尾使用了 .keyup()

$('#bg-btn').click(function(){
    $('#bg-toggle').slideToggle('slow');
    $('#bg-url').keyup(function(){
        var value = $(this).val();
        $('#main-bg').css('background-image', 'url("' + value + '")');
    }).keyup();   <<<<<<<<<<<<<<<<<<<<<<<<<<  This one
});

所以当您单击按钮时，keyup 事件以空值触发（没有背景图像）.. 所以您需要删除 keyup();从头到尾

对于第一个问题，您可以使用.hide() 和fadeOut() .. 所以您的代码应该是这样的

$('#bg-btn').click(function(){
    $('#bg-toggle').slideToggle('slow');
    $('#bg-url').keyup(function(){
        var value = $(this).val();
        // you can use .hide() and fadeOut()
        $('#main-bg').hide(0).css('background-image', 'url("' + value + '")').fadeOut(100);
    });
});

但我认为将代码分开会更好

$('#bg-url').keyup(function(){
    var value = $(this).val();
    // you can use .hide() and fadeOut()
    $('#main-bg').hide(0).css('background-image', 'url("' + value + '")').fadeOut(100);
});
$('#bg-btn').click(function(){
     $('#bg-toggle').slideToggle('slow');
     if($('#bg-url').val().trim() !== ''){  // if url is not empty
        $('#bg-url').keyup(); // or $('#bg-url').trigger('keyup');
     }else{ // if url empty
        console.log('No background image found');
     }
});

【讨论】：

感谢您的帮助，它的变化非常好，但 fadeOut 使整个 div 消失：/ 但效果比我预期的要好 :)
@JakubSzczepanik .. 是的，这段代码将使整个 div 隐藏/淡出 .. 你不能单独淡入/淡出背景图像 .. 如果你需要这样做 .. 你需要具有绝对位置的 div 内的图像并将其用作背景，然后您可以轻松地淡入/淡出该图像..祝你好运:)

【解决方案2】：

你可以用 Jquery animate 方法实现淡入淡出，玩转元素的 opacity 属性：

http://api.jquery.com/animate/

$('#bg-btn').click(function(){
    $('#bg-toggle').slideToggle('slow');
    $('#bg-url').keyup(function(){
        var value = $(this).val();
        var duration = 500; //Duration of animation in ms
        $('#main-bg').animate({
            opacity: 0;
        }, duration, function(){
            $('#main-bg').css('background-image', 'url("' + value + '")');
            $('#main-bg').animate({
                opacity: 1;
            }, duration, function(){
                // End of animation
            });
        });
    }).keyup();
});

【讨论】：

【解决方案3】：

这是一个使用 css 动画的示例。比 javascript 稍微复杂一点，但结果很好。

$(function () {	
  var curVal = '';
  $('#example').on("change keyup paste", function(){
  	//Check to make sure the value actually changed. Highlighting all triggers event using ctrl a 
  	if ($(this).val() != curVal) {
      var ele = $('.background-image'),
        ele2 = $('.background-image-old');
      //Remove the old Classes
      ele2.removeClass('animate-background-old'); 
      ele.removeClass('animate-background');
      
      //Add the new backgrounds 
      ele2.css('backgroundImage', ele.css('backgroundImage'))
        .addClass('animate-background-old');
      ele.css('backgroundImage', 'url("' + $(this).val() + '")')
        .addClass('animate-background');
        
      //Hack to trigger animation
      ele.replaceWith(ele); 
      ele2.replaceWith(ele2); 
      curVal = $(this).val();
    }
  });
});

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: white;
}
.body-wrapper{
  height: 100%;
  position: relative;
}
.body-wrapper-content{
  position: relative;
  z-index: 3;
}
.background-image, .background-image-old{
  height: 100%;
  width: 100%;
  top:0;
  left:0;
  content: '';
  position: absolute;
  bottom: 0;
  display: block;
  z-index: 2;
}

.background-image-old{
  z-index: 1;
}


.animate-background{
   animation: animate-background 2s ease-in-out;
}
.animate-background-old{
   animation: animate-background 2s ease-in-out 0s 1 reverse;
}



@keyframes animate-background {
    from {opacity: 0}
    to {opacity: 1}
}

<html>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    </head>
<body>
  <div class="body-wrapper">
    <div class="background-image-old"></div>
    <div class="background-image"></div>
    <div class="body-wrapper-content">
      <input type="text" id="example" name="example" />
    </div>
  </div>
</body>
</html>

【讨论】：