问题描述
也许大家都知道Facebook的Messenger的外观和工作方式。 我正在尝试在页面上归档类似内容。 我将其分为几个步骤：
1）显示打字动画。 一段时间后（按照我的职能，这是3秒钟），动画消失了（您知道，那些气泡像点一样，就像在iPhone中一样）。
2）动画消失时，显示短信。 这是静态的html元素。 我无意使用php使其可动态编辑。
3）在用户重新加载站点的情况下进行了第三步。 如果element在用户的偏移量之内，则不会显示键入动画。 文本立即显示。
我决定尝试jQuery。 我从来没有任何经验，只有vanilia JS。
代码差不多完成了。 但是我不知道如何引用msgText元素的索引。 现在，当一个气泡聊天可见时，将显示所有具有msgText类的元素。 我想我需要在第一个循环中添加另一个循环，但是我真的不知道。 感谢帮助！
(function($) {
$.fn.visible = function(partial) {
var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};
})(jQuery);
var win = $(window);
var allMods = $(".bubble-chat");
var msgText = $(".text");
allMods.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("already-visible");
msgText.css('display', 'block');
}
if(el.hasClass("already-visible")) {
el.css('display', 'none')};
})
win.scroll(function(event) {
allMods.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-in");
el.delay(3000);
el.queue(function (next) {
$(this).css('display', 'none');
msgText.css('display', 'block');
next();
});
}});
}）;
1楼
Slingy
0
已采纳
2019-02-21 23:07:26
我在解决它时遇到了一些麻烦，但最终还是做到了！ 发布它，以便将来有人使用它。
事实证明，display：none元素不会被浏览器渲染，因此您无法获取它们的偏移量。 因此，我别无选择，只能使用不透明度。 我知道那不是那么漂亮，但是我没有其他想法。 随意问
$.fn.visible = function(partial) {
var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};
})(jQuery);
var win = $(window);
var allMods = $(".bubble-chat");
var msgText = $(".text");
allMods.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("already-visible");
}
if(el.hasClass("already-visible")) {
el.css('display', 'none')};
})
msgText.each(function(i, el) {
var el = $(el);
if ($(this).visible(true)) {
$(this).addClass("already-visible");
}
if($(this).hasClass("already-visible")) {
$(this).css('opacity', '1')};
})
win.scroll(function(event) {
allMods.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-in");
el.delay(3000);
el.queue(function (next) {
$(this).css('display', 'none');
next();
});
}});
msgText.each(function(j, s) {
var s = $(s);
if (s.visible(true)) {
s.addClass("come-in");
s.delay(3000);
s.queue(function (next) {
s.addClass("come-in");
$(this).css('opacity', '1');
next();
});
}});
});
`