Question

我有一点问题。所以我在网站上有输入，如果你粘贴网址，背景图片会改变。它正在改变但问题是背景只是闪烁而且看起来很糟糕。我用fadeIn / fadeOut尝试了一些东西，但没有任何效果如我所料。另一个问题是当我点击按钮时，背景突然消失，直到我粘贴新的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();
});

Answer 1

您可以使用Jquery animate方法实现淡入淡出，使用元素的不透明度属性：

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

Answer 2

对于第二个问题，您已在代码末尾使用.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');
     }
});

Answer 3

以下是使用css动画的示例。比javascript更复杂，但结果很好。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Jquery背景图像FadeOut

3 个答案: