Question

在div中，我有两个相同大小的图像，

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

效果是：

1.已经显示的图像（第一张图像）在底部固定时折叠，第二张图像在顶部固定时向下滚动 2.然后我在代码中插入第二张图像之前的第一张图像，css位置改变了，就像上面的

一样

第一步做得很好，但第二步不起作用

the code and example is here

请帮助我，谢谢

Answer 1

以下是解决方案：我更新了2行 1）$（'＃down'）。css（{top：“0”}）; 成为 $（'＃down'）。css（{top：“59px”}）; 这个盒子在倒塌时应该在这个位置。

2）该行： $（'＃down'）。animate（{height：“59px”，'top'：'0'}，{duration：1000}）; 动画“顶部”属性上升。

下面是代码的代码：

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

Answer 2

这是您想要的更新，希望这可以按照您的确切需要：

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 3

使用此更改：

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

我想用jquery animate和绝对位置实现一个效果

3 个答案: