Questo codice scorre una lista non ordinata con un ID di nome ‘bicycle’ in un box animato in una posizione specifica. Può essere usato su qualsiasi elemento con figli. Sostituire “ul#bicycle li” con gli elementi che si desidera passare.
[code lang=”javascript”]
$(document).ready(function() {
var j = 0;
//millisecondi di ritardo tra gli elementi
var delay = 2000;
function cycleThru(){
var jmax = $("ul#bicycle li").length -1;
$("ul#bicycle li:eq(" + j + ")")
.animate({"opacity" : "1"} ,400)
.animate({"opacity" : "1"}, delay)
.animate({"opacity" : "0"}, 400, function(){
(j == jmax) ? j=0 : j++;
cycleThru();
});
};
cycleThru();
});
[/code]
Piccolo codice per posizionare l’elemento con tutte le sue proprietà da aggiungere al foglio di stilevar j = 0;
//millisecondi di ritardo tra gli elementi
var delay = 2000;
function cycleThru(){
var jmax = $("ul#bicycle li").length -1;
$("ul#bicycle li:eq(" + j + ")")
.animate({"opacity" : "1"} ,400)
.animate({"opacity" : "1"}, delay)
.animate({"opacity" : "0"}, 400, function(){
(j == jmax) ? j=0 : j++;
cycleThru();
});
};
cycleThru();
});
[/code]
[code lang=”css”]
ul#bicycle {
width: 200px;
border: solid;
position: relative;
overflow: hidden;
height: 200px;
}
ul#bicycle li {
font-size: 1.4em;
padding: 20px;
opacity: 0;
position :absolute;
}
[/code]
Il seguente codice HTML con l’elemento padre che contiene una lista non ordinata visualizzerà uno a uno i suoi elementi figli in un box definito nel foglio di stilewidth: 200px;
border: solid;
position: relative;
overflow: hidden;
height: 200px;
}
ul#bicycle li {
font-size: 1.4em;
padding: 20px;
opacity: 0;
position :absolute;
}
[/code]
[code lang=”html”]
<ul id="bicycle">
<li>11 Lorem ipsum dolor sit amet. </li>
<li>22 Ut enim ad minim veniam.</li>
<li>33 Duis aute irure dolor.</li>
<li>44 Excepteur sint occaecat.</li>
</ul>
[/code]
Fine!
Demo live<li>11 Lorem ipsum dolor sit amet. </li>
<li>22 Ut enim ad minim veniam.</li>
<li>33 Duis aute irure dolor.</li>
<li>44 Excepteur sint occaecat.</li>
</ul>
[/code]
⤽
Ancora nessun commento