переключать текст при наведении курсора

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/

  • 0
    Можете ли вы быть более конкретным в том, что вы пытаетесь сделать ... ???
  • 0
    @Shiva Чертовски ясно, он может переключать текст сверху вниз, он хочет обратный эффект
Показать ещё 2 комментария
Теги:
text
toggle

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; использования position: absolute; для ребенка и обеспечить top, bottom значения соответственно.

Демонстрация 2

Даже если браузер не сможет передать элемент, он все равно переключит эффект, но без гладкости. Это будет полезно для немногих пользователей, которые просто используют jQuery для достижения такого эффекта, но с помощью этого вы сохраните 90KB библиотеки. (Но в любом случае, jQuery FTW)

Поделиться
  • 1
    Чертовски хорошее решение. :)
  • 1
    большое Вам спасибо!!!!!
Показать ещё 1 комментарий
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
}
Поделиться
  • 0
    благодарю вас!! это именно то, что я пытался сделать!
  • 0
    пожалуйста!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню