jQuery fadeOut и fadeIn background-image

Question

Когда я нажимаю на определенную ссылку, я хочу, чтобы фоновое изображение fadeOut, изменилось на другое изображение, а затем fadeIn.

код у меня есть:

$('.link').on('click',function(){ 
    var image = $(this).data('image'); 
    $('#div-with-the-bgimage').css('background-image', 'url('+image+')'); 
}) 

Я попытался это:

$('.link').on('click',function(){ 
    var image = $(this).data('image'); 
    $('#div-with-the-bgimage').fadeOut('3000').fadeIn('3000').css('background-image', 'url(' + image + ')'); 
}) 

, но это не работает, что я делаю не так? (Я новичок в JQuery)

EDIT:

Я решил это с Рори McCrossan ответ:

$('.link').on('click',function(){ 
    var image = $(this).data('image'); 
    $('#div-with-the-bgimage').fadeOut('3000', function() { 
     $(this).css('background-image', 'url('+image+')').fadeIn('3000'); 
    }); 
}); 

Но теперь это fadesOut на белом фоне и, а затем fadesIn к изображению , давая ощущение вспышки? Есть ли способ загрузить изображение раньше?

Answer 1

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

$('.link').on('click',function(){ 
    var image = $(this).data('image'); 
    $('#div-with-the-bgimage').fadeOut('3000', function() { 
     $(this).css('background-image', 'url('+image+')').fadeIn('3000'); 
    }); 
}); 

Answer 2

Не было бы намного проще, если бы вы добавить/удалить DIV с изображением вы хотите, и ничего не изменится в фоновом режиме? Просто пример:

<div data-image="some-other-image.jpg" class="appendhere" style="position:relative">some content and an image background here</div> 

Теперь с помощью JQuery, вы можете поместить изображение в приведенных выше данных атрибутов на вершине, с 0 непрозрачности, постепенно исчезать и из:

$('.link').on('click',function(){ 
    var image = $(this).data('image'); 
    var appendcode = '<div class="appended" style="display:none;position:absolute;width:200px;height:200px;overflow:hidden"><img src="' + image + '"></div>'; 
    $('#div-with-the-bgimage').append(appendcode); 
    $('.appended').css({'opacity': 0, 'display':'block', 'z-index': 999}).fadeIn('3000', function() { 
    $(this).fadeOut('3000'); 
    }); 
}); 

Я использовал некоторые встроенные стили чтобы указать, что вы относитесь к обертке, а добавленное абсолютное положение и с более высоким индексом z, вы можете сделать его намного более элегантным, включив их в свой CSS, конечно.

Answer 3

U можно комбинировать animate и opacity или использовать fadeOut и fadeIn функции.

Просмотрите эту ссылку jsfiddle, чтобы увидеть рабочий пример, используя fadeOut и fadeIn.

U также может указать уникальный тег img с атрибутом галереи данных, хранящим несколько URL-адресов для изображений для переключения между всеми ними. Проверьте эту другую ссылку jsfiddle, чтобы увидеть рабочий пример. Нажмите на кнопку Toggle, чтобы изменить изображение.

Надеюсь, это полезно!