保持1 div的过渡效果来移动随后的div？

本文介绍了保持1 div的过渡效果来移动随后的div？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 1，我有一列四列的div，它们在徘徊时有点移动（带有边距和填充）。如何在不添加固定高度的情况下移动低于的内容。它具有流畅的布局，因此具有固定的高度以允许移动有足够的空间，随着窗口宽度减小并且图像缩小，下面的内容开始变得太远。

2。对于赏金，您需要制作 jsFiddle 工作。

即使我有转换：所有，所有的填充-bottom在margin-top转换300ms时立即添加。不应该填充过渡吗？我认为这将摆脱跳跃。我试着在悬停时转换高度以获得同样的效果，但它具有相同的确切问题。

我做了一个 $ b HTML：

< header class =sectionTitle lightboxes clearfix> < h3>< i class =i-small icon-folder-open>< / i>< strong> Portfolio< / strong>< / h3> < / header> < article id =row2fluidrole =presentation> < section id =row2col1> < a class =sliderhref =＃>< img src =mtctinc/images/folioImg1.jpgalt =porfolio 1/> < div class =caption> < h3>例1< / h3> < span>滑块/幻灯片< / span> < / div> < / a> < / section> < section id =row2col2> < a class =youtubehref =＃>< img src =mtctinc/images/folioImg2.jpgalt =portfolio 2/> < div class =caption> < h3>示例2< / h3> < span> Youtube< / span> < / div> < / a> < / section> < section id =row2col3> < a href =＃class =clearfix>< img src =mtctinc/images/folioImg3.jpgalt =porfolio 3/> < div class =caption> < h3>例3< / h3> < span> Flash< / span> < / div> < / a> < / section> < section id =row2col4> < a href =＃class =clearfix>< img src =mtctinc/images/folioImg4.jpgalt =portfolio 4/> < div class =caption> < h3>示例4< / h3> < span> HTML< / span> < / div> < / a> < / section> < / article> < div id =moreContent> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Cras eget nulla laoreet，blandit massa eu，mollis tellus。 Duis pellentesque dui nec diam ullamcorper，ac dignissim sapien interdum。 Proin in libero nec neque fermentum varius。 Integer hendrerit，justo feugiat porttitor iaculis，nisl purus luctus neque，non ultrices magna quam et magna。 Proin porttitor，metus sed commodo pharetra，lacus eros aliquet diam，eu auctor nisi diam quis felis。< / div>

CSS：

.sectionTitle { border-bottom：3px solid＃e9e9e9; 宽度：100％; } .sectionTitle h3 { font-size：11px; text-transform：大写; font-weight：bold; border-bottom：3px solid＃3b3b3b; display：table; margin-bottom：-2px; float：left; 宽度：100％; min-height：33px; line-height：19px; padding-bottom：10px; } .sectionTitle强{ display：inline-block; padding-left：10px; line-height：14px; } .lightboxes { position：relative; 明确：两者; padding-top：30px; } ＃row2fluid { text-align：center; 职位：亲属; float：left; 宽度：100％; } ＃row2fluid img { opacity：.8; border：none; -webkit-transition：全部300ms; -o-transition：全部300ms; -moz-transition：全部300ms; 转换：全部300ms; } ＃row2fluid a：hover img { opacity：1; margin-top：-16px; } ＃row2fluid a：hover .caption h3 { color：＃F15A2B; } ＃row2fluid .caption { border-bottom：1px solid＃E9E9E9; margin：0px 3px; line-height：.7em; padding：14px 0 30px; } ＃row2fluid a：hover .caption { border-bottom：1px solid＃F15A2B; 背景颜色：＃f7f7f7; padding-bottom：46px; } ＃row2fluid .caption span { font-style：italic; font-size：12px; color：#ACACAC; } ＃row2col1 { clear：both; float：left; margin-left：0; 宽度：24.1758％; display：inline-block; padding-top：40px; margin-top：-1px; } ＃row2col2 { clear：none; float：left; 保证金余额：1.0989％; 宽度：24.1758％; display：inline-block; padding-top：40px; margin-top：-1px; } ＃row2col3 { clear：none; float：left; 保证金余额：1.0989％; 宽度：24.1758％; display：inline-block; padding-top：40px; margin-top：-1px; } ＃row2col4 { clear：none; float：left; 保证金余额：1.0989％; 宽度：24.1758％; display：inline-block; padding-top：40px; margin-top：-1px; } ＃row2col1：hover { border-top：3px solid＃F15A2B; padding-top：37px; } ＃row2col2：hover { border-top：3px solid＃F15A2B; padding-top：37px; } ＃row2col3：hover { border-top：3px solid＃F15A2B; padding-top：37px; } ＃row2col4：hover { border-top：3px solid＃F15A2B; padding-top：37px; } #moreContent { clear：both; 职位：亲属; float：left; margin-left：0; 宽度：100％; display：block; padding-top：20px; }

解决方案

您只需要添加 -webkit-transition：全部300ms; -o-transition：全部300ms; -moz-transition：全部300ms; transition：全部300ms; 给标题以及

见这里 jsfiddle/ZuU8V/4/

1. I have a 4 column row of divs that move a little when hovered (with margin and padding). How can I keep this movement from moving the content that is below it without adding a fixed height. It is in a fluid layout so with a fixed height that allows enough room for the movement, the content below starts to get too far away as the window width is reduced and the images scale down.

2. For the bounty you need to make the jsFiddle work.

It seems that even though I have transition: all, all of the padding-bottom gets added instantly while the margin-top transitions for 300ms. Shouldn't the padding transition also? I think that would get rid of the jump. I tried transitioning height on hover for the same effect but it had the same exact issue. the height just got added instead of transitioning.

I made a jsFiddle to play with.

HTML:

<header class="sectionTitle lightboxes clearfix"> <h3><i class="i-small icon-folder-open"></i><strong>Portfolio</strong></h3> </header> <article id="row2fluid" role="presentation"> <section id="row2col1"> <a class="slider" href="#"><img src="mtctinc/images/folioImg1.jpg" alt="porfolio 1" /> <div class="caption"> <h3>Example 1</h3> <span>Slider/Slideshow</span> </div> </a> </section> <section id="row2col2"> <a class="youtube" href="#"><img src="mtctinc/images/folioImg2.jpg" alt="portfolio 2" /> <div class="caption"> <h3>Example 2</h3> <span>Youtube</span> </div> </a> </section> <section id="row2col3"> <a href="#" class="clearfix"><img src="mtctinc/images/folioImg3.jpg" alt="porfolio 3" /> <div class="caption"> <h3>Example 3</h3> <span>Flash</span> </div> </a> </section> <section id="row2col4"> <a href="#" class="clearfix"><img src="mtctinc/images/folioImg4.jpg" alt="portfolio 4" /> <div class="caption"> <h3>Example 4</h3> <span>HTML</span> </div> </a> </section> </article> <div id="moreContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget nulla laoreet, blandit massa eu, mollis tellus. Duis pellentesque dui nec diam ullamcorper, ac dignissim sapien interdum. Proin in libero nec neque fermentum varius. Integer hendrerit, justo feugiat porttitor iaculis, nisl purus luctus neque, non ultrices magna quam et magna. Proin porttitor, metus sed commodo pharetra, lacus eros aliquet diam, eu auctor nisi diam quis felis.</div>

CSS:

.sectionTitle { border-bottom: 3px solid #e9e9e9; width:100%; } .sectionTitle h3 { font-size:11px; text-transform:uppercase; font-weight:bold; border-bottom: 3px solid #3b3b3b; display:table; margin-bottom: -2px; float: left; width: 100%; min-height: 33px; line-height: 19px; padding-bottom: 10px; } .sectionTitle strong { display: inline-block; padding-left:10px; line-height:14px; } .lightboxes { position: relative; clear:both; padding-top: 30px; } #row2fluid { text-align: center; position: relative; float: left; width: 100%; } #row2fluid img { opacity: .8; border: none; -webkit-transition:all 300ms; -o-transition:all 300ms; -moz-transition:all 300ms; transition:all 300ms; } #row2fluid a:hover img { opacity: 1; margin-top: -16px; } #row2fluid a:hover .caption h3 { color: #F15A2B; } #row2fluid .caption { border-bottom: 1px solid #E9E9E9; margin: 0px 3px; line-height: .7em; padding: 14px 0 30px; } #row2fluid a:hover .caption { border-bottom: 1px solid #F15A2B; background-color: #f7f7f7; padding-bottom: 46px; } #row2fluid .caption span { font-style: italic; font-size: 12px; color: #ACACAC; } #row2col1 { clear: both; float: left; margin-left: 0; width: 24.1758%; display: inline-block; padding-top: 40px; margin-top: -1px; } #row2col2 { clear: none; float: left; margin-left: 1.0989%; width: 24.1758%; display: inline-block; padding-top: 40px; margin-top: -1px; } #row2col3 { clear: none; float: left; margin-left: 1.0989%; width: 24.1758%; display: inline-block; padding-top: 40px; margin-top: -1px; } #row2col4 { clear: none; float: left; margin-left: 1.0989%; width: 24.1758%; display: inline-block; padding-top: 40px; margin-top: -1px; } #row2col1:hover { border-top: 3px solid #F15A2B; padding-top: 37px; } #row2col2:hover { border-top: 3px solid #F15A2B; padding-top: 37px; } #row2col3:hover { border-top: 3px solid #F15A2B; padding-top: 37px; } #row2col4:hover { border-top: 3px solid #F15A2B; padding-top: 37px; } #moreContent { clear: both; position: relative; float: left; margin-left: 0; width: 100%; display: block; padding-top: 20px; }

解决方案

You just need to add -webkit-transition:all 300ms; -o-transition:all 300ms; -moz-transition:all 300ms; transition:all 300ms; to the caption as well.

See here jsfiddle/ZuU8V/4/