Interesting jQuery code:
$(document).ready(function(){
var abc='';
$(".doa").on("click",function(){
var doa=$(this).val();
var doah=$(this).position();
abc=doah.top;
var x=+doah.top-80;
$(this).css({color:"red"});
$(".doa").not(this).animate({opacity:"0",margin:"0 0 0 500"},400,function(){
$(this).css({display:"none"});
$(".doa:contains('"+doa+"')").css({position:"absolute","top":doah.top}).animate({"top":50},function(){
$(".doa:contains('"+doa+"')>.doaa").show(function(){
$(".doa").addClass("doa1").removeClass("doa");
});
});
$(".naslov").css({position:"relative"}).animate({top:"300px",opacity:"0"},200);
});
});
)};
Check out the jsFiddle Demo here
I am now experimenting with reversing the animation described above. When a click occurs on class doa1
, I want to trigger the reverse of the animation - hiding doa1 > ul.doaa
first, followed by hiding classes naslov
and doa
back to their original positions. Once class doa1
is reset, it should then reverse animate the divs of class doa
from the top backwards... My attempt can be seen in this updated result