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

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 に答える