jQuery Изменить фоновый URL тела с эффектом затухания - PullRequest
Новая
       27

jQuery Изменить фоновый URL тела с эффектом затухания

0 голосов
/ 05 января 2012

Я дал телу класс .wrapbgone, и я переключаю класс через X секунд на .wrapbgtwo.

Я хочу, чтобы переключение появилось с эффектом затухания.

Этомой CSS: 

.wrapbgone{background:url('http://placehold.it/500x500/915');height:100%;}
.wrapbgtwo{background:url('http://placehold.it/500x500/400');height:1580px;}

и вот пример: http://jsbin.com/ebemez/4/edit

Ответы [ 3 ]

2 голосов
/ 05 января 2012

Поскольку вы меняете класс, вы не можете улучшить его, насколько мне известно (вы можете переключать цвета фона - см. Заголовок http://www.made -by-mike.co.uk ), но не изображения.

Лучшее решение, которое я могу придумать, - это вложить два абсолютно позиционированных элемента div в корневой уровень вашего документа (перед элементом содержимого): 

<body>
    <div id="bgone">&nbsp;</div>
    <div id="bgtwo">&nbsp;</div>
    <div id="content">
        ...
    </div>
</body>

Затем используйте jQuery, чтобы добавить один поверх другого: 

$(document).ready(function() {
    $('#bgtwo').fadeTo(0,0); // or set opacity to 0 in CSS to prevent div appearing then disappearing on page load
    $('#bgtwo').fadeTo(500, 1, function(){
        $('#bgone').remove(); // replace remove() with fadeTo(500,0) if you don't want to remove it from the page altogether
    })
});
1 голос
/ 05 февраля 2012

Я думаю, то, что вы ищете, встроено в ядро ​​jQueryUI. Это функция с именем switchClass (в принципе, очень легко было бы назвать animateClass). Это великолепно; облегчает плавную анимацию элементов на основе текущего и будущего классов (автоматически удаляет / добавляет эти классы для вас) и поддерживает упрощение переходов, времени перехода и обратного вызова fxn. Надеюсь, это поможет, я использую это для перехода в меню моей галереи на моем сайте.

1 голос
/ 05 января 2012

Вы не сможете сделать это, используя свойство css background image класса body.

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

...