Salve,
scusate l'ignoranza ma sono agli inizi, abbiate pieta'.
Allora, premessa: all'interno di un div con posizionamento relativo, ho vari h3, ognuno con 1 div seguente; questi ultimi div partono tutti nascosti tramite jquery.
Cliccando su h3, quest'ultimo si posiziona al centro, sotto si visualizza div successivo e si nascondono tutti gli altri h3, su click successivo si torna a situazione iniziale.
per ora ho fatto in questo modo e tutto funziona:
$("h3").toggle(function(){
var indexWidth = $('#index').innerWidth();
var h3NativeWidth = $(this).outerWidth();
var centering = (indexWidth-h3NativeWidth)/2;
$(this)
.animate({'top':0, 'left':centering}, 'fast')
.addClass("top")
.siblings()
.addClass("hidden")
.end()
.next()
.slideDown('slow')
.fadeIn();
}, function(){
$(this)
.next()
.slideUp('fast')
.end()
.css({'top':'', 'left':''})
.removeClass("top")
.siblings()
.removeClass("hidden");
});
esempio html:
<div id="Index">
<h3>testo</h3>
<div>
asdasdasd</p>
</div>
<h3>testo2</h3>
<div>
asdasdasd</p>
</div>
<h3>testo3</h3>
<div>
asdasdasd</p>
</div>
</div>
Prima domanda: ho fatto tutto bene o (sicuramente) si puo' fare meglio?
Seconda domanda: come faccio su secondo click su h3 a creare un'animazione che muova h3 a sua posizione iniziale?
Grazie a chiunque voglia rispondere