jquery动画帮助

是否可以同时动画两个div宽度（一个递增，一个递减），以便父容器的总宽度保持完全相同。jquery动画帮助

作为一个例子，容器div包含5个子div。 Teh容器div宽1000px，其中4个子div宽150px，另一个400px。我希望能够将400px div的动画制作为150px，并将150px的其中一个制作为400px;

我得到的问题是，父容器收缩和扩大动画完成 - 它发生明显。

我不是在寻找一个插件或任何这个，只是一些建议，在实现这一目标的最佳方式。

非常感谢您的任何帮助。

编辑：

的主要问题是，在一个右每一格进行动画被拉到左边，然后送回出来的时候完成。

这里是我使用

<style type='text/css'> 
    .panel-wrapper { 
     width: 954px; 
     height: 372px; 
     background-color: #fff; 
     position: relative; 
     overflow: hidden; 
    } 
    .panel-wrapper .panel { 
     margin-right: 1px; 
     height: 100%; 
     width: 64px; 
     float: left; 
     background-color: #cacaca; 
    } 
    #home-panel { 
     width: 359px; 
    } 
    .panel.last { 
     margin-right: 0; 
    } 
</style> 

<script type='text/javascript'> 
//<![CDATA[ 
jQuery(document).ready(function() { 
    jQuery('.panel').mouseenter(function() { 
     jQuery('.panel-wrapper .open').stop().animate({width:"64px"},400, 'linear'); 
     jQuery('.panel-wrapper .open').removeClass('open'); 
     jQuery(this).addClass('open'); 
     jQuery(this).stop().animate({width:"359px"},400, 'linear'); 
    }); 
}); 
//]]> 
</script> 

<div class='panel-wrapper'> 
    <div id='home-panel' class='panel open'> 
    </div> 

    <div class='panel'> 
    </div> 

    <div class='panel'> 
    </div> 

    <div class='panel'> 
    </div> 

    <div class='panel'> 
    </div> 

    <div class='panel'> 
    </div> 

    <div class='panel'> 
    </div> 

    <div class='panel last'> 
    </div> 
</div>

来源

2011-03-12 David

您是否尝试过将动画类型设置为线性？ – DXL 2011-03-12 17:39:15

我已经尝试设置宽松线性已经但这没有任何区别 – David 2011-03-12 17:43:48

设置父高度为固定的像素数将保持它的收缩或扩张的代码。

来源

2011-03-12 17:39:39

嗨，它的水平和divs浮动左。所有东西都有固定的像素宽度。 – David 2011-03-12 17:41:22

如果父div正在调整大小，那么它不得具有已设置的固定宽度。 – 2011-03-12 17:50:38

@Chris W.它确实有一个固定的宽度，每个孩子divs – David 2011-03-12 18:01:19

在你想要对抗的div后面加上一个1000px宽的空div。这应该保持包装div不收缩。

来源

2011-03-12 17:51:56

嗨，吉姆，谢谢，但这没有奏效 - 你背后的推理是什么？ – David 2011-03-12 17:59:54

jquery动画帮助

回答

相关问题