0

我想做的是在 div 内从底部到顶部垂直切换文本。

我已经做到了，但只是从上到下。

有任何想法吗？

这是代码

<div id="box1">
<div id="box1text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat purus elit, sit amet dignissim dui elementum in. Nunc elementum tempor nulla quis mollis. Nunc et nibh eu magna pharetra condimentum ac ut felis.Nunc et nibh eu magna pharetra condimentum ac ut felis.Nunc et nibh eu magna pharetra condimentum ac ut felis.
</div>
</div><!--box1 end -->

    #box1 {
        width:340px;
        height:200px;
        background-color:#ccc;
        float:left;
    }

    #box1text {
    height:50px;
    overflow:hidden;
    opacity:0.5;
    padding:10px 10px;
    text-align:justify;


    }

$(document).ready(function() {

  $("#box1text").hover(
    //on mouseover
    function() {
      $(this).animate({ 
        height: '+=150' 
        }, 'slow' 
      );
    },
    //on mouseout
    function() {
      $(this).animate({
        height: '-=150px' 
        }, 'slow'
      );
    }
  );

});

这是演示 http://jsfiddle.net/atseros/YrFaQ/

4

2 回答 2

2

如果你想要一个纯 CSS 解决方案，我是从头开始制作的，你可以使用display: table-cell;和使用vertical-align: bottom;将文本与底部对齐，而不是transition用于平滑。

演示

div {
    display: table-cell;
    height: 150px;
    width: 300px;
    background: #f5f5f5;
    vertical-align: bottom;
}

div span {
    display: block;
    height: 40px;
    overflow: hidden;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

div:hover span {
    height: 150px;
}

或者，您可以position: relative;在容器元素上使用，而不是分别position: absolute;用于子元素和提供值。topbottom

演示 2

即使浏览器无法传输元素，它仍然会切换效果但没有平滑度。这对于只使用 jQuery 来实现这种效果的少数用户很有用，但是通过使用它，您将节省90KB库。（但无论如何，jQuery FTW）

于 2013-10-04T10:20:42.360 回答
0

http://jsfiddle.net/kasperfish/YrFaQ/1/

只需将您的 box1text 定位到 box1 的底部。你可以通过给你的 box1 容器一个相对位置来做到这一点。这样您就可以在容器内绝对定位任何子元素（box1text）。看看css...

#box1 {
    width:340px;
    height:200px;
    background-color:#ccc;
    float:left;
    position:relative;
}

#box1text {
    height:50px;
    overflow:hidden;
    opacity:0.5;
    padding:5px 5px;
    position:absolute;
    left:0;
    bottom:0
}
于 2013-10-04T10:18:56.693 回答