Я попытался создать простой переход css background-image с помощью функции jquery fadeIn fadeOut.Я использовал описание на странице jquery, чтобы создать мой.Теперь, это работает довольно хорошо, но я хотел бы иметь вид плавного перехода.На данный момент это просто исчезает из белого и из белого.Вот код:
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
var imgArr = new Array(
'img/bg_1.jpg',
'img/bg_2.jpg'
);
var preloadArr = new Array();
var i;
for(i=0; i < imgArr.length; i++){
preloadArr[i] = new Image();
preloadArr[i].src = imgArr[i];
}
var currImg = 1;
var intID = setInterval(changeImg, 10000);
function changeImg(){
$('#head_bg').fadeOut('slow', function(){
$(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat');
}).fadeIn('slow');
}
});
</script>
Надеюсь, кто-то знает решение:)
Теперь я опробовал переключение двух разных классов фона, обеспечивая одинаковый результат.
NEW !!! NEW !!! NEW !!! NEW !!! NEW !!!
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$('#head_bg').delay(4000).animate({opacity: 0}, 2000, function(){
$('#head_bg').removeClass().addClass('bg2').animate({opacity: 1}, 2000);
})
});
</script>
Теперь у меня есть два способа сделать то же самое;) .. Но все же неПонятия не имею, как сделать это с двумя отдельными div'ами, сделать их видимыми друг над другом и вращать их.Извините, но я не дошел до того, как ... может кто-нибудь дать мне быстрый пример, пожалуйста?