Transizione background di un <div>

[dovakin]

ciao a tutti, nella rete non ho trovato nulla del genere per cui spero che sappaite ersaudire la mia richiesta.

Vorrei creare una sorta di slider con vari effetti di transizione random una cosa come nivo slider per intenderci.

Il mio problema nasce dal fatto che tutti questi effetti li vorrei mettere come background di un <div>.

Sapete aiutarmi? grazie!

[cavicchiandrea]

Sullo sfondo di un div credo (mai provato altro) che sia possibile usare solo opacità con animate() in dissolvenza

[dovakin]

si si va bene anche col fade...

[Xinod]

mi spiace ma se cerchi effetti grafici complessi non puoi farlo sul background di un solo elemento, sicuramente non mantenendo un minimo di compatibilita' con browser diversi dai modernissimi:
css3 permetterebbe il posizionamento e il ridimensionamento dell' immagine in background, nonche' background multipli
...i browser (IE in primis) sono molto distanti dal supportarli pienamente
e anche se volessi dimenticare chi non puo' supportarli, non mi risultano esservi script gia' pronti del tipo

ciao

[Xinod]

vedo che nel frattempo avete limitato il raggio
comunque non si puo' fare il fade del solo background,
devi fare il fade di tutto l' elemento

[dovakin]

ho trovato questo:

http://www.techerator.com/2010/11/ho...w-with-jquery/

può andare?

[Xinod]

come detto sopra, anche quello che hai trovato fa il fade dell' intero elemento
sei tu a dover decidere se puo' rispondere ai tuoi requisiti o meno

[dovakin]

allora l ho provato e funziona, ce un piccolo problema però,

il fade viene esteso anche agli altri elementi contenuti nel div che quindi compaiono e scompaiono.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" language="JavaScript"> 
			$(document).ready(function(){
				
				var imgArr = new Array( // relative paths of images
					'{T_THEME_PATH}/images/bgheader.gif',
                    '{T_THEME_PATH}/images/bgheader1.gif',
                    '{T_THEME_PATH}/images/bgheader2.gif'
					);
					
				var preloadArr = new Array();
				var i;
				
				/* preload images */
				for(i=0; i < imgArr.length; i++){
					preloadArr[i] = new Image();
					preloadArr[i].src = imgArr[i];
				}
				
				var currImg = 1;
				var intID = setInterval(changeImg, 1000);
				
				function changeImg(){
					$('.headerbar').animate({opacity: 0}, 1000, function(){
						$(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat');
					}).animate({opacity: 1}, 1000);
				}
 
			});
	</script>

<div class="headerbar">
        			<div class="inner"><span class="corners-top"><span></span></span>
                    <div style="height: 120px;">
        			<div id="site-description">
        				{SITE_LOGO_IMG}
        				<h1>{SITENAME}</h1>
        				

{SITE_DESCRIPTION}</p>
        				<p class="skiplink">{L_SKIP}</p>
        			</div>
        
        		
        			<div id="search-box">
        				<form action="{U_SEARCH}" method="get" id="search">
        				<fieldset>
        					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="{SEARCH_WORDS}{L_SEARCH_MINI}" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
        					<input class="button2" value="{L_SEARCH}" type="submit" />

        					{L_SEARCH_ADV} {S_SEARCH_HIDDEN_FIELDS}
        				</fieldset>
        				</form>
        			</div>
        		
                </div> 
        			<span class="corners-bottom"><span></span></span></div>
        		</div>

sapete aiutarmi??

[Xinod]

vedi sopra

[dovakin]

capisco ma allora perchè qui non spariscono?

http://www.markjjohnsondds.com/