JQuery изменение div background-image с fadeIn/Out

Я пытаюсь создать эффект fadeIn/Out на созданном мной сайте (изменить: URL-адрес сайта удален)

Все работает отлично, за исключением случаев, когда вы нажимаете один из цветов в цветовой палитре, он не заменяет изображение без эффекта.

Это маленький script, который я написал, который запускается onclick на одном из цветов.

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.

Цените помощь!

Ответы

Ответ 1

Решение, которое сработало для меня:

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

Ответ 2

Это была единственная разумная вещь, которую я нашел, чтобы увянуть фоновое изображение.

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

Ваш CSS; теперь расширен с переходом CSS3.

#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)";

Войла, он исчезает!

Очевидная оговорка:, если ваш браузер не поддерживает свойство CSS3 transition, это не сработает.

Ответ 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);  

});

Ответ 4

Почему бы не использовать 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();

Ответ 5

Большинство решений просто исчезают в элементе, а не в фоновом режиме. Это означает, что ваша информация скрыта во время загрузки фона, что более чем часто не является тем, что вы хотите.

Я написал следующее решение, которое работает, взяв фоновое изображение и добавив его в качестве изображения для элемента. Затем он исчезает, когда он загружается, в то время как все время сохраняются ваши дочерние элементы.

Он также добавляет предварительно загружаемый 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>

Ответ 6

Возможно, вы захотите попробовать что-то вроде этого

Заменить

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

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

Отрегулируйте 3000 по мере необходимости, чтобы увеличить время в анимации.

Полностью непроверенный