Как добиться следующего эффекта ползунка / переключения с помощью jQuery?

Question

Прямо сейчас на моем сайте у меня есть следующий JavaScript, который показывает и скрывает

<div class="commentBox"></div>

когда пользователь нажимает

<a href="#" class="storycoments" onclick="return false" onmousedown="javascript:toggleSlideBox">Show Comments</a>

Полный код:

<script type="text/javascript"> 
function toggleSlideBox(x){if($('#'+x).is(":hidden")){$(".comentBox").slideUp(200);$('#'+x).slideDown(200)}else{$('#'+x).slideUp(200)}}
</script>

<a href="#" class="storycoments" onclick="return false" onmousedown="javascript:toggleSlideBox">Show Comments</a>

<div class="commentBox">Content</div>

---

Эффект можно проиллюстрировать следующим образом:

---

Я хотел изменить эту функцию, чтобы она действовала по-другому, но я не мог понять это. По сути, я хотел показать содержимое, которое находится внизу, когда оно начинает расширяться и имеет эффект затухания.

---

Это то, чего я надеялся достичь:

---

Кто-нибудь может подсказать, как добиться эффекта слайда / переключения, показанного на рисунке 2? поэтому, когда пользователь нажимает на ссылку, она увеличивается таким образом, а когда ссылка снова нажимается, она сжимается.

Answer 1

Эффект, который вы описываете, для меня выглядит как слайд-эффект *1001* пользовательского интерфейса JQuery (а не слепой эффект, который вы имеете в настоящее время).Это не обеспечивает анимацию непрозрачности, но обеспечивает очень простое решение в противном случае.Или, может быть, я вас неправильно понимаю?

(метод принимает параметр для перемещения вниз, а не справа налево, конечно)

$("#test").show("slide", {direction: "up"}, 1000);

JSFiddle здесь

Answer 2

Если вы просто анимируете фоновое изображение, как этот кролик, просто установите фоновое положение следующим образом:

background-position: 0 100%;

Это позволит выровнять фон по нижнему краю, а не по верхнему.

Для текстового контента применяется тот же принцип. Вам просто нужно расположить контент абсолютно по нижнему краю. Например:

<div class="container">
    <div class="content">
        <p>Text</p>
    </div>
</div>

Тогда используйте этот CSS:

.container {
    position: relative;
    overflow: hidden;
}

.content {
    position: absolute;
    bottom: 0; left: 0;
}

Единственная проблема, связанная с этим, заключается в том, что вам нужно найти высоту содержимого, чтобы вы знали, насколько расширить контейнер.

Для этого вы можете использовать этот jQuery:

var height = $('.content').outerHeight();

Затем на событии клика просто анимируйте на правильную высоту:

$('.container').animate({
    'height': height
});

Надеюсь, это поможет:)