Jquery, animazione che ricomincia automaticamente.

**narghat** · 03-08-2012, 12:09

In internet continuo a trovare esempi di loop in Jquery, ma quello che a me interessa non e' un loop. A me servirebbe un'animazione tipo questa, che pero ogni volta riparta dal punto di partenza.

codice:

(document).ready(function () {
	$('#effetto').fadeIn('fast');
	$('#effetto').animate({
	'top': '-=30px',
	'opacity': '0.5' }, '2000');
	$('#effetto').fadeOut('slow');
});

Va bene che sia infinita. Anche se per me l'ideale sarebbe che venga ripetuta un tot di volte passandogli la durata da php, ma la vedo dura. Quindi va bene anche che sia infinita :P

Nel caso mi sia spiegato male, spiego: Mi serve un affetto animato ad un div , che una volta terminata l'animazione, sparisca e ripeta tutto ripartendo dalla posizione iniziare; cosi all'infinito.

**cavicchiandrea** · 03-08-2012, 15:08

vedi se qui trovi un effetto che ti vada bene, altrimenti dovrai mettere il tuo codice in una funzione e alla fine un setInterval che la temporizzi

**narghat** · 03-08-2012, 17:04

Originariamente inviato da cavicchiandrea
dovrai mettere il tuo codice in una funzione e alla fine un setInterval che la temporizzi

Ehm.. alla fine ci sono arrivato senza vedere il sito.
poi quando ho visto la soluzione che ho fatto, mi sono accorto che era esattemente quello che hai detto tu :P
1) dentro una funzione 2) setInterval che la temporizzi. Ma ero troppo niubbo per capire cosa intendessi.
Ecco il codice.

codice:

<style type="text/css">
html, body {
	position:relative;
	height:100%;
	width:100%;
	padding:0;
	margin:0;
}
#ciao {
			padding=0;
			color:red;
			text-align: center;
			position: relative;
			font-size: 30px;
			z-index: 6;
			left: 0px;
			top: 200px;
}
</style>

 <script>
function scrittaanimata(){
  $(document).ready(function () {
  $('#contorno').append ('<div id="ciao">ciriciao</div>');
  $('#ciao').fadeIn(500);
  $('#ciao').animate({'top': '-=40px','opacity': '0.4' }, '1500',function(){
  ('#ciao').remove(); 
       });
    });
 }
 setInterval("scrittaanimata()", 2000);
</script>
</head>
<body>
<div id='contorno'>
	<div id='ciao' style='display:none; >ciriciao</div>
</div>

ehm, come mai quando cambio pagina e poi ritrovo vedo le scritte moltiplicarsi? Ho sicuramente toppato qualcosa :P

**cavicchiandrea** · 03-08-2012, 17:35

come hai messo il ready non serve per non avere problemi potresti fare cosi $(document).ready(function(){setInterval("scrittaa nimata()", 2000);}) cioè far partire l'animazione quando tutto il caricamento è avvenuto

Discussione: Jquery, animazione che ricomincia automaticamente.

Strumenti discussione

Ricerca discussione

Visualizza

Jquery, animazione che ricomincia automaticamente.

Permessi di invio