jquery - 在鼠标悬停时切换文本

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)