Question

我正在尝试在我创建的网站上创建淡入/淡出效果（编辑：网站网址已删除）

除非您单击调色板中的一种颜色，否则一切都很有效，它会替换图像而不起作用。

这是我写的小脚本，只需点击其中一种颜色即可触发。

function changeImage(newColor) {

    //var previousImage = $('#image-holder').css("background-image");

    $('#image-holder').css("background", "url('images/design-" + newColor + ".jpg')");
};

我尝试使用$('#image-holder').fadeOut(1500)然后使用$('#image-holder').fadeIn(1500)，但它表现得很有趣......它会使图像双重淡化。

$('#image-holder').css("background", "url('images/design-" + newColor + ".jpg')").fadeOut(function(){$(this).fadeIn()});

我想要实现的是在彩色框上点击，当新背景图像淡入时，当前背景图像将淡出。

我知道如果我使用两个<img src="" />并切换它们的显示/可见性就更容易实现，但遗憾的是我无法改变HTML，所以我正在寻找基于jQuery的解决方案。

感谢帮助！

Answer 1

这是我发现淡化背景图片的唯一合理的事情。

<div id="foo">
  <!-- some content here -->
</div>

你的CSS;现在已加强CSS3 transition。

#foo {
  background-image: url('a.jpg');
  transition: background 1s linear;
}

现在换掉背景

$("#foo").css("background-image", "url(b.jpg)");

或者使用原生javascript进行操作

document.querySelector("#foo").style.backgroundImage = "url(b.jpg)";

Voilà，它消失了！

明显的免责声明：如果您的浏览器不支持CSS3 transition属性，则无效。

Answer 2

对我有用的解决方案：

var image = $('#image-holder');
    image.fadeOut(1000, function () {
        image.css("background", "url('images/design-" + newColor + ".jpg')");
        image.fadeIn(1000);
    });

Answer 3

var currentBackground = 0;

var backgrounds = [];

backgrounds[0] = 'images/BasePic1.jpg';

backgrounds[1] = 'images/BasePic2.jpg';

backgrounds[2] = 'images/BasePic3.jpg';

backgrounds[3] = 'images/BasePic4.jpg';

backgrounds[4] = 'images/BasePic5.jpg';

function changeBackground() {

    currentBackground++;

    if(currentBackground > 4) currentBackground = 0;

    $('#image-holder').fadeOut(1500,function() {
        $('#image-holder').css({
            'background-image' : "url('" + backgrounds[currentBackground] + "')"
        });
        $('#image-holder').fadeIn(1500);
    });


    setTimeout(changeBackground, 5000);
}

$(document).ready(function() {

    setTimeout(changeBackground, 5000);  

});

Answer 4

大多数解决方案只是淡化元素，而不是背景。这意味着您的信息在加载背景时会被隐藏，这通常不是您想要的。

我编写了以下解决方案，它通过拍摄背景图像并将其作为图像添加到元素中来实现。然后它会在加载时淡入，同时始终保持子元素可见。

它还添加了一个预加载的gif，它在加载时会消失。您可能需要使用更大的图像进行测试才能看到这一点。

下面的代码和小提琴/片段。

jQuery(document).ready(function() {

  jQuery('.Loader').each(function(index, el) {

    var sBG = jQuery(this).css('background-image');
    sBG = sBG.replace('url(', '').replace(')', '').replace('"', '').replace('"', '');

    jQuery(this).prepend('<img src="' + sBG + '" id="tmp_' + jQuery(this).attr('id') + '" class="BGImage" />');
    jQuery(this).css('background-image', 'url("http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif")');

    jQuery(".BGImage:not(.processed)").each(function() {
      this.onload = function() {

        var oElement = jQuery('#' + jQuery(this).attr('id').replace('tmp_', ''));
        jQuery('#' + jQuery(oElement).attr('id')).css('background-image', 'none');
        oElement.removeClass('Loader');
        jQuery(this).fadeIn(3000);

      }
    });
  });

});

.Loader {

  background-position: center;

  background-repeat: no-repeat;

  transition: background 0.5s linear;

}

.BGImage {

  position: absolute;

  z-index: -1;

  display: none;

}

#Test {

  height: 300px;

  background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTMa7lFP0VdTl63KgPAOotSies-YQ3qSslOuXWE6FnFxJ_EfF7tsA);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="Test" class="Loader">Some text</div>

Answer 5

为什么不使用jQuery来注入你需要的标记呢？

var $image_holder = $('#imageHolder'),
    $carousel_container = $('<div/>').attr('id', 'carousel_container'),
    images = ['first.jpg', 'second.jpg', 'third.jpg'];

for ( var i=0; i<images.length; i++ )
{
    $('<img/>').attr('src', images[i]).appendTo($carousel_container);
}

$carousel_container.insertAfter($image_holder);
$image_holder.hide();

Answer 6

你可能想尝试这样的事情

替换

$('#image-holder').css("background", "url('images/design-" + newColor + ".jpg')");

带

$('#image-holder').animate({background : url('images/design-' + newColor + '.jpg') }, 3000);

根据需要调整3000以增加动画中的时间。

完全未经测试

jQuery使用fadeIn / Out更改div背景图像

6 个答案: