Question

我想要做的是在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/

Answer 1

如果你想要一个纯CSS解决方案，我已经从头开始，你可以使用display: table-cell;并使用vertical-align: bottom;将文本对齐到底部，而不是使用transition为了平滑。

Demo

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;，并分别提供top，bottom值。

Demo 2

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

Answer 2

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
}

在鼠标悬停时切换文本

2 个答案: