javascript - Jquery 背景图像淡出

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

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