скрестить изображение с фоном - PullRequest
Новая
       26

скрестить изображение с фоном

0 голосов
/ 21 сентября 2011

Я смотрю на простое фоновое изображение.

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

У меня есть этот код: 

$('#backgroundDiv img').fadeOut(550,'linear', function(){
    $('#backgroundDiv img').attr({'src':img_fs});
     //if(this.complete)
    $('#backgroundDiv img').fadeIn(250,'linear');
});

но он сначала делает fadeOut и после fadeIn.Я не хочу исчезать, потому что я не хочу видеть цвет фона.Я комментирую одну строку, потому что в IE9 и Chrome происходит сбой.

Может кто-нибудь помочь мне с любым перекрестным выцветанием ??

Спасибо

Ответы [ 2 ]

0 голосов
/ 21 сентября 2011

может быть, это поможет вам 

$('#backgroundDiv img').hide()
$('#apresentacaoBgImage img').attr('src',img_fs).fadeIn(250,'linear');
0 голосов
/ 21 сентября 2011

Итак, вы хотите затемнить изображение и затемнить другое, которое фактически «под» первым, верно?

Ваш код ожидает исчезновения первого изображения, а затем исчезает в другом.

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

$('#backgroundDiv img').fadeOut(550,'linear');
$('#apresentacaoBgImage img').attr({'src':img_fs}).fadeIn(250,'linear');

РЕДАКТИРОВАТЬ: Если у вас есть только одно изображение, это буквально невозможно. Поэтому мы должны создать копию этого изображения и сделать то, что вам нужно, с этими двумя, потому что в какой-то момент (когда первое изображение начинает исчезать, а второе начинает появляться) нам определенно нужны два изображения. Вот что я сделал:

Обратите внимание, что div #backgroundDiv должен содержать только одно изображение, поскольку он используется как position: relative для позиционирования второго изображения в , первого перед всеми причудливыми вещами.

Рабочий пример здесь.

HTML: 

<div id="backgroundDiv" style="position: relative;">
    <img src="http://trollface.sparxified.com/Trollface_HD.jpg" width="200px" height="200px" />
</div>

JS: 

var img_fs = 'http://driph.com/words/wp-content/uploads/2008/04/e.gif';
$("#backgroundDiv img").clone().appendTo("#backgroundDiv").hide().attr({ src: img_fs }).css({ position: 'absolute', top: 0, left: 0 });
$("#backgroundDiv img:first").fadeOut(550,'linear');
$("#backgroundDiv img:last").fadeIn(550,'linear');

PS: я изменил продолжительность обоих fadeIn() и fadeOut(), чтобы они были одинаковыми, поскольку это выглядело странно с разными.

...