javascript - Jquery Background Image FadeOut -

i've got little problem. making website there input , if paste url background image change. changing problem backgrounds flashes , looks gross. tried fadein/fadeout, nothing works expected. other problem when click button background disappears until paste new 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(); }); 

for 2nd problem use .keyup() @ end of code

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

so when click button keyup event fired empty value (with no background image) .. need delete keyup(); end

for first problem can use .hide() , fadeout() .. code should this

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

but think better separate code be

$('#bg-url').keyup(function(){     var value = $(this).val();     // can use .hide() , 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 not empty         $('#bg-url').keyup(); // or $('#bg-url').trigger('keyup');      }else{ // if url empty         console.log('no background image found');      } });