CSS фоновое изображение перехода с помощью jquery - PullRequest
3 голосов
/ 09 июня 2011

Я попытался создать простой переход 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'ами, сделать их видимыми друг над другом и вращать их.Извините, но я не дошел до того, как ... может кто-нибудь дать мне быстрый пример, пожалуйста?

Ответы [ 3 ]

2 голосов
/ 09 июня 2011

Эффекты перехода в jQuery предназначены для значений, которые можно установить численно. Вы можете плавно переходить от одного цвета к другому, изменяя значения RGB. Вы можете выцветать на изображении, делая его менее прозрачным. Выделение двух фоновых изображений - это нечто совершенно другое. Единственное значение CSS - это свойство background-image, которое является URL. JQuery на самом деле хорошо это решает, постепенно исчезая и исчезая.

Самая простая вещь, о которой я могу подумать, это использовать два элемента div друг над другом. Потушите прозрачность самого верхнего элемента, чтобы сделать видимым нижний элемент. В зависимости от содержания изображений, которые не должны выглядеть слишком плохо.

1 голос
/ 10 июня 2011

Теперь я построил решение, спасибо за подсказку с исчезновением двух дел:

.bild {
  position:absolute;
  display:none;
  width:1000px;
  height:735px;
}

<div id="head_bg">
<div class="bild"><img src="img/bg_1.jpg" /></div>
<div class="bild"><img src="img/bg_2.jpg" /></div>
</div>

<script type='text/javascript'>
   $('.bild').hide();

   function bgSlide() {
     $(".bild").first().appendTo('#head_bg').fadeOut(5000);
     $(".bild").first().fadeIn(5000);

   setTimeout(bgSlide, 7000);
}
bgSlide();
</script>

Но с одним ограничением. Я хотел, чтобы изображения выходили за пределы экрана без прокрутки. Вот почему я использовал тег css background-image. Но сейчас для меня совершенно нормально переходить к меньшим изображениям.

1 голос
/ 09 июня 2011

В настоящее время вы используете функцию обратного вызова в fadeOut для постепенного исчезновения нового изображения.

Это сработает только после того, как исчезновение завершено (следовательно, переход от белого к белому, поведение белого к изображению).

Вам нужен еще один «слой», в который вы предварительно загружаете изображение, чтобы уже позади первого (судя по всему, ваши HTML и CSS также должны быть изменены), а затем запускайте затухание и затухание вв то же время.(Просто сделайте один вызов за другим, это будет сделано)

...