Javascript-форум - Как добавить плавный переход

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Как добавить плавный переход (https://javascript.ru/forum/jquery/39377-kak-dobavit-plavnyjj-perekhod.html)

Как добавить плавный переход

Приветствую всех!
Друзья есть скрипт, который меняет фон сайта, но меняет уж больно резко. Хотелось бы увидеть плавный переход на другой фон.
Подскажите, пожалуйста, что добавить в этот скрипт, что бы осуществить идею?

Код:

jQuery(function(){

        jQuery("#header_scroller").scrollable({circular: true}).autoscroll({interval: 5000});

        jQuery("#client_scroller").scrollable({circular: true});

        jQuery('input[title]').inputHints();

        jQuery('textarea[title]').inputHints();

        

        var api = jQuery("#header_scroller").data("scrollable"); 

        

        api.onSeek(function(e, i) {                        

                i = i+1;                

                jQuery("ul.indexbg li").removeClass("active");

                jQuery("#bg0"+i).addClass("active");

        });

        

});

пытался вставлять .fadeIn(2000);, но никак не помогает.

Спасибо за любую информацию!

а где собсна тот скрипт который меняет?

DarAmal,
подскажите а где в скрипте строчка которая меняет фон страницы?

DarAmal,
:-?

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
</head>
<body>
<script>
function go()
{
var  t=Math.ceil(Math.random()*16777214)
jQuery("body").animate({
      backgroundColor: "#"+t.toString(16)
  }, 2000, go );
}
go()
</script>
</body>
</html>

то что привел на верху, это тот скрипт.
фон дан в css и периодически меняет в #bg

собственно вот эти фоны он меняет из css:

body.inner { background:url(../images/bg_top_red.jpg) 50% 0 no-repeat; }

ul.indexbg { position:absolute; left:0; top:0; width:100%; height:500px; list-style:none; margin:0px; padding:0px; z-index:1;
}
ul.indexbg li{ display:none; position:absolute; left:0; top:0; width:100%; height:570px; }
ul.indexbg li#bg01 { background:#fff url(../images/bg_main_top_red.jpg) 50% 0 no-repeat;}
ul.indexbg li#bg02 {	background:#fff url(../images/bg_main_top_black.jpg) 50% 0 no-repeat;  }
ul.indexbg li#bg03 { background:#fff url(../images/bg_main_top_blue.jpg) 50% 0 no-repeat; }
ul.indexbg li.active{ display:block; z-index:2; }
ul.indexbg li.active2{ z-index:3; }

"#bg0"+i это на 99 картинок, запасливо однако))

вот нужно плавный переход типа Fade добавить.
Подскажите пожалуйста, как это сделать в данном коде.

кстати, вот собственно то, как данный скрипт работает:
http://service.fg-group.tj/

у вас там скрипт в бесконечном цикле подгружается

Почитайте про css3 анимацию

Цитата:

Сообщение от DarAmal

Друзья есть скрипт, который меняет фон сайта, но меняет уж больно резко.

Выложите минимальный HTML код страницы, без скриптов, но со стилем и кнопками

<ul class="indexbg">
      <li id="bg01" class="active"></li>
      <li class="" id="bg02"></li>
      <li class="" id="bg03"></li>
    </ul>
    
        <div id="header_scroller" class="scrollable">
        <div class="items" style="left: -820px;">
        <div class="frame3 cloned">
        <div class="col col1">
        </div>
        </div>
        <div class="frame1">
        <div class="col col1">
        </div>
        </div>
        <div class="frame2">
        </div>
        </div>
        <div class="frame3">
        <div class="col col1">
        </div>
        </div>
        </div>
        </div>

ul.indexbg { position:absolute; left:0; top:0; width:100%; height:500px; list-style:none; margin:0px; padding:0px; z-index:1;
}
ul.indexbg li{ display:none; position:absolute; left:0; top:0; width:100%; height:570px; }
ul.indexbg li#bg01 { background:#fff url(../images/bg_main_top_red.jpg) 50% 0 no-repeat;}
ul.indexbg li#bg02 {	background:#fff url(../images/bg_main_top_black.jpg) 50% 0 no-repeat;  }
ul.indexbg li#bg03 { background:#fff url(../images/bg_main_top_blue.jpg) 50% 0 no-repeat; }
ul.indexbg li.active{ display:block; z-index:2; }
ul.indexbg li.active2{ z-index:3; }

/* scrollers */
.scroller_container { 
	float: left;
    height: 300px;
    margin-bottom: 60px;
    position: relative;
    width: 100%;
    z-index: -3;
	}

 и т.д.

Цитата:

Сообщение от animhotep (Сообщение 258800)

у вас там скрипт в бесконечном цикле подгружается

я думаю это совсем не причем. мне всего лишь нужно эффект плавности добавить и все.

Цитата:

Сообщение от danik.js (Сообщение 258804)

Почитайте про css3 анимацию

на сколько я знаю css3 анимация не поддерживается в IE и в Опере

ну а как все таки в этом скрипте добавить fade?

jQuery(function(){
	jQuery("#header_scroller").scrollable({circular: true}).autoscroll({interval: 5000});
	jQuery("#client_scroller").scrollable({circular: true});
	jQuery('input[title]').inputHints();
	jQuery('textarea[title]').inputHints();
	
	var api = jQuery("#header_scroller").data("scrollable"); 
	
	api.onSeek(function(e, i) {			
		i = i+1;		
		jQuery("ul.indexbg li").removeClass("active");
		jQuery("#bg0"+i).addClass("active");
	});
	
});

я просто синтаксис не знаю

думаю достаточно
jQuery("ul.indexbg li").removeClass("active");
jQuery("#bg0"+i).addClass("active");
заменить на
jQuery("ul.indexbg li").fadeIn();
jQuery("#bg0"+i).fadeOut();

Цитата:

Сообщение от animhotep (Сообщение 258824)

думаю достаточно
jQuery("ul.indexbg li").removeClass("active");
jQuery("#bg0"+i).addClass("active");
заменить на
jQuery("ul.indexbg li").fadeIn();
jQuery("#bg0"+i).fadeOut();

Спасибо большое! Работает :victory:

<!DOCTYPE html>
  <html>
<head>
<style>
ul.indexbg { background:#fff;position:absolute; left:0; top:0; width:100%; height:57px; list-style:none; margin:0px; padding:0px; z-index:1;
}
ul.indexbg li{cursor:pointer;display:none;width:100%; height:57px; }
ul.indexbg li#bg01 { background:#fff url(http://t1.gstatic.com/images?q=tbn:ANd9GcSYs5-YBL3DoG4ilymKaXfontTUNQLRteBK2iLI-jKBQks2wyP2Dw) 150% 100% no-repeat}
ul.indexbg li#bg02 {background:#fff url(http://t1.gstatic.com/images?q=tbn:ANd9GcTz058O2V0_6Yvt-HJ3MfuNg1HwJ6wmiFW9JS6tKXC7mx5mDKlK) 150% 100%  no-repeat}
ul.indexbg li#bg03 {background:#fff url(http://t3.gstatic.com/images?q=tbn:ANd9GcTQmAEFHfxewnJrL5I2hop44CsH4Nw2s8Xo1eSnlnESLo9rb0jd) 150% 100%  no-repeat}
ul.indexbg li.active{ display:block; z-index:2; }
ul.indexbg li.active2{ z-index:3; }

/* начальный фон */
#background {
 left:0; top:0; 
 position:fixed;
 width:100%;
 height:100%;
 background:#fff url(http://t1.gstatic.com/images?q=tbn:ANd9GcSYs5-YBL3DoG4ilymKaXfontTUNQLRteBK2iLI-jKBQks2wyP2Dw) 50% 0;
}
body {
 width:100%;
 min-height:100%;
}
</style>

<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("ul.indexbg li").click(function(){
    var ls=$("ul.indexbg li")
    ls.removeClass('active').hide();
    next = ls.index(this)+1;
    if(next>=ls.length)next=0;
    var background=ls.eq(next).css("background-image");
    $('img[id="background"]').not(':first').remove();
    var oldFon=$('#background')
    var newFon=oldFon.clone();
    newFon.css({"background-image":background,opacity:0});
    newFon.insertAfter(oldFon);
    ls.eq(next).addClass('active').show()
    newFon.animate({opacity:1},800);
    oldFon.animate({opacity:0},800, "linear", function(){oldFon.remove();} );

  })
});
</script>
 </head>
    <body><img id="background" src="http://forum.mybb.ru/i/blank.gif">
      <ul class="indexbg">
        <li id="bg01" class="active">01</li>
        <li class="" id="bg02">02</li>
        <li class="" id="bg03">03</li>
      </ul>


    </body>
  </html>

DarAmal,
Вариант цветного фона с анимацией

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
  <script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
  <style type="text/css">
  .scrollable {
  position:relative;
  overflow:hidden;
  width: 950px;
  height:350px;
  }
  .scrollable .items {
  width:20000em;
  position:absolute;
  }
  .items div {
  float:left;
  }
  </style>
  <script>
$(function() {
  $("#header_scroller").scrollable({circular: true}).autoscroll({interval: 5000})
  var api = $("#header_scroller").data("scrollable");
  var color = ["#750708","#003333","#01294C"]
  api.onSeek(function(e, i) {  console.log(i)
     var  t="#"+Math.ceil(Math.random()*16777214).toString(16);
    //   var t = color[i]
        api.getItems().animate({
      backgroundColor: t
  }, 2000 );
    });
  });
  </script>
</head>

<body>
  <div class="scroller_container">
    <a class="prev browse left"></a>

    <div class="scrollable" id="header_scroller">
      <div style="left: -3560px;" class="items">
        <div class="frame3 cloned">
        <div class="col col1">
          <div class="profi">
            Ноутбуки и Десктопы
          </div>

          <div class="profi1">
            ремонт сертифицированными<br>
            специалистами
          </div><br>
          <br>
          <a href="repair/repair-notebooks"><img width="142" height="48" border="0" style=
          "border: 0px none;" src=
          "http://service.fg-group.tj/images/stories/slider/read-1.png"></a>
        </div><img border="0" style="border: 0px none;" src=
        "http://service.fg-group.tj/images/stories/slider/image2.png" class="image2"></div>

        <div class="frame3 cloned">
        <div class="col col1">
          <div class="profi">
            Ноутбуки и Десктопы
          </div>

          <div class="profi1">
            ремонт сертифицированными<br>
            специалистами
          </div><br>
          <br>
          <a href="repair/repair-notebooks"><img width="142" height="48" border="0" style=
          "border: 0px none;" src=
          "http://service.fg-group.tj/images/stories/slider/read-1.png"></a>
        </div><img border="0" style="border: 0px none;" src=
        "http://service.fg-group.tj/images/stories/slider/image2.png" class="image2"></div>

        <div class="frame1">
        <div class="col col1">
          <div class="profi">
            Профессиональный
          </div>

          <div class="profi1">
            ремонт и<br>
            обслуживание любых
          </div>

          <div class="profi2">
            Принтеров и МФУ
          </div><br>
          <br>
          <a href="repair/repair-printers"><img width="142" height="48" border="0" style=
          "border: 0px none;" src=
          "http://service.fg-group.tj/images/stories/slider/read-1.png"></a>
        </div><img width="599" height="354" border="0" style="border: 0px none;" src=
        "http://service.fg-group.tj/images/stories/slider/image3.png" class="image1"></div>

        <div class="frame2">
        <div class="col col1">
          <img width="186" height="48" border="0" style="border: 0px none;" src=
          "http://service.fg-group.tj/images/stories/slider/hp_logo.jpg">

          <div class="profi1">
            в г.Душанбе<br>
            от компании
          </div><br>
          <img width="157" height="75" border="0" style="border: 0px none;" src=
          "http://service.fg-group.tj/images/stories/slider/fg-logo.png"><br>
          <a target="_blank" href="http://hp.fg-group.tj"><img width="154" height="59" border="0"
          style="border: 0px none;" src=
          "http://service.fg-group.tj/images/stories/slider/read.png"></a>
        </div><img width="565" height="380" border="0" style="border: 0px none;" src=
        "http://service.fg-group.tj/images/stories/slider/image1.png" class="image1"></div>

        <div class="frame3">
        <div class="col col1">
          <div class="profi">
            Ноутбуки и Десктопы
          </div>

          <div class="profi1">
            ремонт сертифицированными<br>
            специалистами
          </div><br>
          <br>
          <a href="repair/repair-notebooks"><img width="142" height="48" border="0" style=
          "border: 0px none;" src=
          "http://service.fg-group.tj/images/stories/slider/read-1.png"></a>
        </div><img border="0" style="border: 0px none;" src=
        "http://service.fg-group.tj/images/stories/slider/image2.png" class="image2"></div>

        <div class="frame1 cloned">
        <div class="col col1">
          <div class="profi">
            Профессиональный
          </div>

          <div class="profi1">
            ремонт и<br>
            обслуживание любых
          </div>

          <div class="profi2">
            Принтеров и МФУ
          </div><br>
          <br>
          <a href="repair/repair-printers"><img width="142" height="48" border="0" style=
          "border: 0px none;" src=
          "http://service.fg-group.tj/images/stories/slider/read-1.png"></a>
        </div><img width="599" height="354" border="0" style="border: 0px none;" src=
        "http://service.fg-group.tj/images/stories/slider/image3.png" class="image1"></div>
      </div>
    </div><a class="next browse right"></a>
  </div>
</body>
</html>