Question

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

        $(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之外，但是当它们完全在它之外时，它们又重新出现。我该如何解决？

感谢。

Answer 1

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

Answer 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
        });

希望它有所帮助。

问候。

Answer 3

您可以使用“overflow：hidden”，但它会剪切容器末尾的“word”或“letter”。

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

$（ '截断'）。trunk8（{ 线条：1 }）; $（”。truncate2' ）。trunk8（{ 线：2 }）; $（”。truncate3' ）。trunk8（{ 线：3 }）;

您将在项目的任何位置使用以下类：“truncate”，“truncate2”（对于2行），“truncate3”（对于3行）。

jQuery：在div之外使字母消失

3 个答案: