[jQuery] Image rotation/fading topstory
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)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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++;
});
});
$('#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..
Gesponsorde koppelingen:
Niemand die dit weet?
Okay. Heb 't opgelost.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$('#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);
$('#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..
Gewijzigd op 01/01/1970 01:00:00 door Gerben Jacobs
