Jquery背景图像FadeOut(Jquery Background Image FadeOut)

Jquery背景图像FadeOut(Jquery Background Image FadeOut)

我有一个小问题。 所以我在网站上有输入，如果你粘贴网址，背景图片会改变。 它正在改变，但问题是背景只是闪烁而且看起来很糟糕。 我用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(); });

I've got a little problem. So I am making website where there is an input and if you paste the URL the background image will change. It is changing but the problem is that the backgrounds just flashes and it looks gross. I tried something with fadeIn/fadeOut, but nothing works as I expected. The other problem is when I click the button the background suddenly disappears until I paste a 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(); });

最满意答案

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

for 2nd problem you already use .keyup() at the end of your 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(); <<<<<<<<<<<<<<<<<<<<<<<<<< This one });

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

for first problem you can use .hide() and fadeOut() .. So your code should be like this

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

But I think it will be better to separate the code to be

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