Question

1。我有一个4列的div，在悬停时会移动一点（带边距和填充）。如何保持此移动不移动下面的内容而不添加固定高度。它具有流畅的布局，因此具有固定的高度，允许足够的空间进行移动，随着窗口宽度减小和图像缩小，下面的内容开始变得太远。

2。要获得赏金，您需要jsFiddle工作。

似乎即使我有transition: all，填充底部的所有也会立即添加，而margin-top会转换300ms。填充过渡不应该吗？我认为这将摆脱跳跃。我尝试在悬停时转换高度以获得相同的效果，但它具有相同的确切问题。高度刚刚加入而不是过渡。

我做了一个jsFiddle来玩。

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="http://mtctinc.com/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="http://mtctinc.com/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="http://mtctinc.com/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="http://mtctinc.com/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;
}

Answer 1

你只需要添加 -webkit-transition:all 300ms; -o-transition:all 300ms; -moz-transition:all 300ms; transition:all 300ms; 也是标题。

见这里 http://jsfiddle.net/ZuU8V/4/

保持转换效果1 div上移动后面的div？

1 个答案: