[jQuery] Image rotation/fading topstory

Door Gerben Jacobs op 22-04-2009 02:32

1.849 views

Hallo,

Ik ben bezig met een afbeelding rotatatie/topstory systeem in jQuery.
Heb 't redelijk ver, maar zit nog met één punt; Hoe voeg ik een fade-effect toe?

Code die ik heb (m.u.v. de array)


function setTopstory(ts, id) {
	$('#topstory').css('backgroundImage','url(' + ts[id][0] +')'); 
	$("#topstory .title").html(ts[id][1]);
	$("#topstory .content").html(ts[id][2]);
	$("#topstory .readmore a").attr("href", ts[id][3]);
}


$(document).ready(function() {
	// First run, let's do it manually!
	setTopstory(topstories, 0);
	
	// Then after the timer finishes, start where we left
	var index = 1;
	$.timer(3000, function (timer) {
		if (index == topstories.length) {
			index = 0;
		}
		setTopstory(topstories, index);
		index++;
	});
});

Om de 3 seconden wordt setTopstory() uitgevoerd en nu wil ik dat ie gaat faden, en halverwege het faden de data veranderd en daarna weer terug fade naar 100..

Ik heb waarschijnlijk .fadeTo("slow", 1) nodig etc. Maar waar plaats ik die?
Want bij komt ie of na dat alles al veranderd is in 't volgende item of hij komt daarvoor en fade voor niks..

Gerben Jacobs

22-04-2009 20:47

Het is nog niet helemaal 24-uur geleden, maar om 2 uur 's nachts zijn er niet veel online.

Niemand die dit weet?

Okay. Heb 't opgelost.


	$('#topstory').fadeTo(500, 0.7, function() {
		$('#topstory').css('backgroundImage','url(' + ts[id][0] +')'); 
		$("#topstory .title").html(ts[id][1]);
		$("#topstory .content").html(ts[id][2]);
		$("#topstory .readmore a").attr("href", ts[id][3]);
	}).fadeTo(1500, 1);

Pas als hij in 500 ms naar 0.7 opacity gefade is (en klaar is) veranderd de tekst en achtergrondafbeelding. Als dat gedaan is, gaat de fade weer terug naar 1 (volle) opacity en doet daar 1500ms over zo dat 't effect (dat er iets is veranderd..) goed zichtbaar is..

Reageren

Inloggen om te reageren