jQuery：让字母在 div 外消失答案

【问题标题】：jQuery: make letters disappear when outside a divjQuery：让字母在 div 外消失
【发布时间】：2014-09-19 17:33:56
【问题描述】：

我是 jQuery 的初学者，我做了这个小提琴：

http://jsfiddle.net/vwnp2do6/

        $(this).children('.comname').children('.comtitle').animate({
            left: '-=200px'
        }, {
            queue: true,
            duration: 500
        });
        $(this).children('.comname').children('.comcontent').animate({
            right: '-=200px'
        }, {
            queue: true,
            duration: 500
        });

我想我想完成什么很清楚，但我不明白为什么标题和描述在完成动画后再次出现。它们似乎消失在 div 之外，但当它们完全在 div 之外时，它们又会再次出现。我该如何解决？

谢谢。

【问题讨论】：

标签： jquery html css hover

【解决方案1】：

我在您的 div 中添加了一个overflow: hidden;，ID 为 comite http://jsfiddle.net/vwnp2do6/1/ 这是你想要的吗？

【讨论】：

是的，这正是我想要的。这么简单的解决方案哈哈。谢谢！
是的，我知道，那是因为正确的值应该更大

【解决方案2】：

将overflow:hidden 添加到.comname 选择器。并将图片的标题和标题移动 300px：

.comname {
  padding: 10px;
  text-align: center;
  color: #575650;
  font-family:"Century Gothic";
  font-size: 22px;
  width: 238px;
  height: 82px;
  padding-top: 20px;
  background-color: #c4c3b3;
  position: relative;
  overflow: hidden;
}

js:

        $(this).children('.comname').children('.comtitle').animate({
            left: '-=300px'
        }, {
            queue: true,
            duration: 500
        });
        $(this).children('.comname').children('.comcontent').animate({
            right: '-=300px'
        }, {
            queue: true,
            duration: 500
        });

        $(this).children('.comname').children('.comtitle').animate({
            left: '+=300px'
        }, {
            queue: true,
            duration: 500
        });
        $(this).children('.comname').children('.comcontent').animate({
            right: '+=300px'
        }, {
            queue: true,
            duration: 500
        });

希望对你有帮助。

问候。

【讨论】：

【解决方案3】：

你可以使用“overflow:hidden”，但是它会在容器的末尾剪掉“单词”或“字母”。

我建议你使用以下 JS 库：http://jrvis.com/trunk8/

$('.truncate').trunk8({ 行数：1 }); $('.truncate2').trunk8({ 行数：2 }); $('.truncate3').trunk8({ 行数：3 });

您将在项目中的任何地方使用以下类：“truncate”、“truncate2”（用于 2 行）、“truncate3”（用于 3 行）。

【讨论】：