Я хочу добиться эффекта с помощью jquery animate и абсолютной позиции

Question

В div у меня есть два изображения одинакового размера,

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

эффект:

1. уже показанное изображение (первое изображение) сворачивается с фиксированным дном,второе изображение сворачивается с фиксированным верхом 2. затем я вставляю первое изображение перед вторым изображением в коде с измененной позицией css, как и выше

первый шаг выполнен хорошо, но второй шаг не работает

код и пример здесь

пожалуйста, помогите мне, спасибо

Answer 1

Вот обновление для того, что вы хотите, надеюсь, это работает так, как вы хотите:

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);
});

также добавьте это к CSS

h1{overflow:hidden;}

Answer 2

Используйте эти изменения:

css:
 #up{ background:red;}        
 #down{ background:yellow;}
.top{ height:0px; top:0px; }
.bottom{ height:59px; bottom:0px;}

javascript:

$(function () {
    function x() {
        $('h1').last().insertBefore($('h1').first());

        $('h1').first().removeClass();
        $('h1').first().addClass("top");
        $('h1').last().removeClass();
        $('h1').last().addClass("bottom");

        $('h1').first().animate({ height: "59px"}, { duration: 1000});
        $('h1').last().animate({ height: "0" }, { duration: 1000,complete:x });


    }
    $('#down').addClass('bottom');
    $('#up').addClass('top');
    $('#down').animate({ height: "0" }, { duration: 1000 });
    $('#up').animate({ height: "59px" }, { duration: 1000, complete: x });
});

Answer 3

Вот решение: я обновил 2 строки 1) $ ('# down'). Css ({top: "0"});быть $ ('# down'). css ({top: "59px"});в то время как этот блок должен находиться в этом месте, когда он свернут.

2) Строка: $ ('# down'). animate ({height: "59px", 'top': '0'}, {продолжительность: 1000});анимировать атрибут top для увеличения.

Вот код, который должен выглядеть следующим образом:

        $(function () {
        function x() {
                $('#down').insertBefore('#up');
                // The line was update
                $('#down').css({ top: "59px" });
                $('#up').css({ bottom: "0" });
            // Also this line was updated.
            $('#down').animate({ height: "59px",'top':'0' }, { duration: 1000 });
                $('#up').animate({ height: "0" }, { duration: 1000 });

        }

        $('#down').animate({ height: "0" }, { duration: 1000 });
        $('#up').animate({ height: "59px" }, { duration: 1000, complete: x });
    });