Salve ecco il codice di una piccola animazione
Non riesco a capire perché funzioni solo la prima volta. Il mio obiettivo è quello di creare una piccola animazione che sposti la cartina dell'Italia in alto a sinistra ogni volta che viene cliccata un'area della mappa. Quando la cartina è piccola in alto a sinistra aggiungo una classe 'zoomed' che mi fa capire che l'animazione è stata eseguita correttamente e che server per far ritornare la cartina grande nello stato iniziale quando ci si clicca sopra. Spero che mi sappiate aiutare perché ci sto sbattendo la testa da 3 ore...Codice PHP:(function($){
$('area').css('outline','none');
var datamap = new Array();
$('area').click(function(e) {
alert("Area Clicked");
e.preventDefault();
datamap.width = $('#scuoleItalia').width();
datamap.height = $('#scuoleItalia').height();
datamap.html = $("#mapContainer").html();
$('#mappaitalia').addClass('zoomed');
$('#scuoleItalia').css({'width':'150px','height':'175px', 'margin':0});
$('#mapContainer').html('');
$('#scuoleItalia img').animate({
"width": 150,
"height": 175
}, 500 );
});
$('#mappaitalia').click(function(e) {
if($(this).hasClass('zoomed')){
alert("Mappa Clicked");
$(this).removeClass('zoomed');
$('#scuoleItalia').css({'width':'390px', 'height':'456px', 'margin':'0 auto'});
$('#mapContainer').html(datamap.html);
$('#scuoleItalia img').animate({
"width": 390,
"height": 456
}, 500 );
}
});
})(jQuery);
Avevo inserito le istruzioni nel document ready... poi ho spostato il tutto in una funzione esterna... ma continua a funzionare solo la prima volta...
Nel dettaglio ora accade questo:
La pagina si carica con la cartina grande
Scelgo una regione cliccandoci su
Parte l'animazione che sposta la cartina in alto a sinistra riducendo l'img
Clicco sulla img ridotta (class='zoomed')
E la cartina ritorna nello stato originario (grande al centro)
Se scelgo nuovamente una regione (qualsiasi) non funziona più...
Rispondi quotando
Originariamente inviata da cavicchiandrea
