jquery浮动动画问题

我想做一个动画。演示：http://jsfiddle.net/pVTR7/9/jquery浮动动画问题

$('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 - >区域之间的空间

我可以使用绝对位置，但然后我需要经常检查内容的高度，并将此高度添加到容器。

来源

2012-10-25 Benmay

所以你想要相同的动画效果如何发生重置权？ – Raghurocks

您需要更改方法。花车很难控制 –

我设法控制花车并做这个人想要的东西。 –

您可以使用此

$('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-25 11:28:43 Raghurocks

交易方式如下：

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

我需要改变的宽度，以减少到0，而不是0％

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

.right不得不被设定为浮动：左;

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

希望这有助于！

来源

2012-10-25 11:33:15

jquery浮动动画问题

回答

相关问题