jquery - css transtion not working with javascript -

i trying move image bottom of page top. trying in way transition occurs after series of events fadein , fadeouts.

here javascript:

//move circles $("#fullcircles").delay(1500).fadein();                                 //document.getelementbyid("fullcircles").style.display = "block";  $(".circlesfull").toggleclass("move-circle"); 

and css

.circlesfull{ height:100%; width: 100%; position: relative; left: 0px; z-index: 1; display: none;  -webkit-transition: top 2s; -moz-transition: top 2s; -o-transition: top 2s; transition: top 2s; top: 800px;  }  /*trigger moving of circles*/ .move-circle{     top:80px; } 

this code not animate transition. instantly moves it.

if same in css animates transition properly.

.content2:hover .circlesfull{ top:0px; }