0

我正在尝试制作动画。演示：http: //jsfiddle.net/pVTR7/9/

$('a.hide').click(function(){
    $('.left').animate({'width':'0%'}, 1000);    
    $('.right').animate({'width':'100%'}, 1000);
});

$('a.reset').click(function(){
    $('.left').animate({'width':'50%'}, 1000);    
    $('.right').animate({'width':'50%'}, 1000);
});

描述： 2 个不同的区域，在 50% 宽度处具有不同的内容。单击“单击”时，左侧区域将隐藏，右侧区域将占据全宽。单击“重置”时，左侧区域将滑入，两个区域的宽度均为 50%。（见演示）

问题：当隐藏左侧区域时，右侧区域在动画期间跳下！！在重置时一切正常，两个区域之间没有任何空间（应该是这样）

根据浏览器的不同，处理方式也有所不同。Safari -> 右侧区域跳下。Firefox -> 区域之间的空间

我可以使用绝对位置，但是我需要始终检查内容的高度并将这个高度添加到容器中。

4

2 回答 2

0

这是交易：

http://jsfiddle.net/pVTR7/19/

我需要将宽度更改为 0，而不是 0%

$('a.hide').click(function(){
    $('.left').animate({'width':'0'}, 1000);    
    $('.right').animate({'width':'100%'}, 1000);
});

.right 必须设置为 float:left;

.right {
    width: 50%;
    height: 50%;
    float: left;
    background: #ccc;
}

希望这可以帮助！

于 2012-10-25T11:33:15.513 回答
0

你可以用这个

$('a.hide').click(function(){
    var the_width = $(this).parent().width();
    $('.left').animate({'width':the_width-the_width}, 1000);    
    $('.right').animate({'width':the_width}, 1000);
});

$('a.reset').click(function(){
    var the_width = $(this).parent().width() / 2;
    $('.left').animate({'width':the_width }, 1000);    
    $('.right').animate({'width': the_width}, 1000);
});​

http://jsfiddle.net/raghurocks/pVTR7/18/

当您使用浮动时，您不应该给出直接值，最好使用变量给出希望这有助于 D：

于 2012-10-25T11:28:43.917 回答