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

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

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

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

Почитайте про 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>