Question

In a div I have a two same size images full it,

<img id="second image">
<img id="first image">

the effect is :

1.the already showed image(first image) collapse with bottom fixed,the second image roll down with top fixed
2.then I insert first image before second image in code,with css position changed,just like above

the first step done well,but the second step doesn’t work

the code and example is here

please help me ,thank you

Answer 1

Here is an update for what you want, hope this works as you exactly want:

var stimer;
var updown = true;
$(function () {
    function circling(){
        if(updown === true){
               $('#up').css('top',0).animate({ height: "59px" }, 1000);
            $('#down').css('top',0).animate({ height: 0, top:'59px' }, 1000);
               updown = false;
           } else {
               $('#up').animate({ height: "0",top:'59px' }, 1000);
               $('#down').css('top',0).animate({ height: '59px' }, 1000);
               updown = true;
           }
    }
    stimer = setInterval(function (){circling();}, 2000);
});

also add this to css

h1{overflow:hidden;}