Jquery 배경 이미지 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

$('#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로 페이드이 방법을 애니메이션을 실현할 수 : 이미 코드의 끝에서() .keyup 사용 2 문제에 대한

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 3

다음은 CSS 애니메이션을 사용한 예입니다. 자바 스크립트보다 좀 더 복잡하지만 결과는 좋습니다. 도움을

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