jquery - (jQuery) 如何在可滚动的 div 中的元素在滚动时出现动画？

Question

这是我的整个 HTML 和 CSS:

http://jsfiddle.net/WgL9z/

我正在从头开始构建聊天。我有一个包含 div 的可滚动 div，每条已发送的消息都有一个。有点像

<div>
    (undefined number of divs pertaining to the same class)
</div>

我想为消息设置动画，以便它们在滚动时变得可见/不可见，理想情况下不允许部分看到消息。消息要么被看到，要么不被看到，而不是像现在这样半途而废。

由于是聊天，消息会堆积起来，所以 scrolltop() 会增加，每条消息的高度也会根据文本的多少而变化，所以我不知道该怎么做.

Answer 1

希望我明白你的意思。这是我对您问题的解决方案:http://jsfiddle.net/silveraven/WgL9z/10/

最重要的是:

CSS:

#mesanjescont{
    position: relative;
}

.not-visible {
    opacity: 0 !important;
}

.mensaje{
    opacity: 1;
    -webkit-transition: opacity 2s;
    /* Safari */
    transition: opacity 2s;
}

这将帮助您创建元素的动画显示/隐藏。

JavaScript (I used jQuery 1.11.0):

if (mensajeTop + mensajeHeight > mensajescontHeight || mensajeTop + mensajeHeight < 0){
    $(this).addClass("not-visible");
} else {
    $(this).removeClass("not-visible");
}

此 if-else 语句确定元素是否可见。