Как добавить эффект fadeIn при изменении фонового изображения с помощью .css в Jquery - PullRequest
Новая
       16

Как добавить эффект fadeIn при изменении фонового изображения с помощью .css в Jquery

2 голосов
/ 20 февраля 2011

Эй, ребята, я пытаюсь добавить эффект затухания при изменении фонового изображения с помощью .css в Jquery Я не очень много знаю о Java, надеясь, что кто-нибудь может мне помочь!

Код для изменения фонового изображения CSS здесь довольно прост: 

$(document).ready(function(){
$("#button01").click(function () {
      $("#content_wrapper").css({backgroundImage : 'url(image/staff/shinji.jpg)' } );
        });
    });

Это как галерея изображений, я просто показываю это в фоновом изображении CSS все работает нормально, но мне было интересно, можно ли добавить эффект fadeIn или fade-to.

Ответы [ 2 ]

1 голос
/ 21 февраля 2011

Нельзя переходить одно изображение в другое, только свойства, такие как сплошные цвета фона.

Что вы можете сделать, это уменьшить непрозрачность элемента, содержащего изображение.

Используя этометод, что вам нужно сделать, чтобы добиться желаемого эффекта, это иметь 2 изображения одно поверх другого.

Затем вы можете постепенно исчезать одно, а другое - исчезать.

Так что-то вроде: 

// write a little function to do a toggling fade
jQuery.fn.fadeToggle = function(speed, easing, callback) { 
   return this.animate({opacity: 'toggle'}, speed, easing, callback); 
};

// make sure one layer is marked as active and shown and the other is hidden
$("#layer1").show();
$("#layer2").addClass('inactive').hide();

// then you can do this:
$("#button01").click(function () {
    $("#layer1").fadeToggle('slow').toggleClass('inactive');
    $("#layer2").fadeToggle('slow').toggleClass('inactive');
    // then set the new background image for the hidden layer
    $(".inactive").css({backgroundImage : 'url(image/staff/shinji.jpg)' } );
};

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

0 голосов
/ 21 февраля 2011

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

Вы не сможете иметь ЛЮБОЙ контент внутри контейнера с замиранием фона, или эффект замирания также повлияет на содержимое.

Затем, используя jQuery с эффектами, сделайте следующее: 

$('#element').fadeOut('slow', function() {
    // Animation complete.
});
...