JQuery Background Image FadeOut

Question

У меня есть небольшая проблема. Поэтому я создаю сайт, на котором есть вход, и если вы вставляете URL-адрес, фоновое изображение будет меняться. Он меняется, но проблема в том, что фоны только вспыхивают, и он выглядит грубым. Я попробовал что-то с 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

для 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 fi красный с пустым значением (без фонового изображения). Поэтому вам нужно удалить 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 2

Вы можете реализовать затухает с Jquery живой метод, играя со свойством непрозрачности элемента:

$('#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 3

Вот пример использования анимации css. Немного сложнее, чем javascript, но результат хороший.

$(function() { \t 
 
    var curVal = ''; 
 
    $('#example').on("change keyup paste", function(){ 
 
    \t //Check to make sure the value actually changed. Highlighting all triggers event using ctrl a 
 
    \t 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>