自动制作DIV动画 [英] Animating a DIV automatically

问题描述

http://jsfiddle.net/AndyMP/fVKDy/

这个小提琴说明了我要解决的问题.容器DIV可以容纳两个动画化的DIV.第二个DIV的高度小于第一个DIV，因为内容较少.我正在尝试做的是让底部DIV根据可见时第二个DIV中内容的高度自动向上滑动.但是它向上滑动并超过第二个DIV.

This fiddle illustrates a problem I am trying to solve. The container DIV accommodates two DIVs which are animated across. The second DIV has a smaller height than the first because there is less content. What I am trying to do is get the bottom DIV to slide up automatically according to the height of the content in the second DIV when it is visible. But it slides up and over the second DIV.

关于如何解决此问题的任何想法?

Any thoughts on how to solve this?

$(function() {
    $(".left_slide").click(function() {
        $(".block1").stop(true, true).animate({ left: -400 }, 500).hide(1000);
        $(".block2").stop(true, true).animate({ left: 0 }, 500);
    });
});
$(function() {    
    $(".right_slide").click(function() {
        $(".block2").stop(true, true).animate({ left: 400 }, 500);
        $(".block1").stop(true, true).animate({ left: 0 }, 500);
    });
});

CSS

#blog_slide_container {
position: relative;
width: 400px;
z-index: 5;
overflow: hidden;
border: 1px solid #000;
}
.block1 {
position: relative;
top: 0px;
left: 0px;
width: 400px;
z-index: 6;
background-color: #333;
color: #FFF;
}
.block2 {
position: absolute;
top: 0px;
left: 400px;
width: 400px;
z-index: 6;
background-color: #CCC;
color: #FFF;
}
#bottom_container {
position: relative;
float: left;
width: 100%;
height: 280px;
z-index: 3;
background-color: #000;
}

推荐答案

检查我更新的小提琴

添加了用于动态更改容器高度的代码.

Added code to dynamically change the container height.

检查动画版本 http://jsfiddle.net/skram/fVKDy/17/

另一个版本.. http://jsfiddle.net/skram/fVKDy/16/<-区别在于，在底部滑块向上/向下滑动之后，发生了向左/向右移动.

Another version.. http://jsfiddle.net/skram/fVKDy/16/ <-- Difference is that the left/right shift happens after the bottom blocks slides up/down.

查看更新的小提琴演示.

两件事，

1. 为#blog_slide_container添加了固定高度.设置动画时，动画div的位置变为absolute，因此容器将自身调整为0 height.
2. 单击右键后，在block1上添加了节目.

1. Added a fixed height to the #blog_slide_container. When you animate, the position of the animating div becomes absolute and so the container re-sizes itself to 0 height.
2. Added show on block1 when right is clicked.

这篇关于自动制作DIV动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！