问题与jQuery的了slideDown（）

检查这个代码：http://jsfiddle.net/ZXN4S/1/问题与jQuery的了slideDown（）

HTML：

<div class="input"> 
    <input type="text" size="50" id="test_input"> 
    <input type="submit" value="send" id="test_submit"> 
</div> 

<ul> 
    <li class="clear"> 
     <div class="comment"> 
      <div class="image"> 
      <img src="http://www.chooseby.info/materiale/Alcantara-Black_granito_nero_naturale_lucido_3754.jpg"> 
      </div> 
      <div class="info"> 
      <div class="name">Name</div> 
      <div class="text">text</div> 
      <div class="timestamp">timestamp</div> 
      </div> 
     </div> 
    </li> 
</ul>

的jQuery：

$(document).ready(function() { 
    $("#test_submit").click(function() { 
     $.post('/echo/json/', function(data) { 
      last = $("ul li:first-child"); 
      new_line = last.clone(); 
      new_line.hide(); 
      last.before(new_line); 
      new_line.slideDown('slow'); 
     }); 

     return false; 
    }); 
});

如果您尝试插入输入领域的一些文字，然后点击提交你可以看到我正在谈论的问题。当它滑落时，幻灯片的高度是错误的，效果很糟糕。但是，如果你删除div info它运作良好。我该如何解决？

来源

2011-11-20 Fred Collins

：SI必须去吃饭......这是我会做什么http://jsfiddle.net/xTFHt/ –

Thi似乎解决了这个问题：

ul li .info { 
    float: right; 
    width: 485px; // fixed width to the div 
}

来源

2011-11-20 01:30:12

在JS小提琴演奏后，这似乎已经完成了招：

在你的CSS，ul li .info { }

地址：height: 50px;

来源

2011-11-20 01:08:58 djdy

是的，我也做了。问题是文字是可变的，所以我不能修正'li'高度。 –

设置：

ul li .info { 
    float: left; 
}

这么做是为了我（在铬中测试）

来源

2011-11-20 01:19:34 realshadow

不错，但是如果文本的高度比图片的高度高，那么文本会进入图片的底部。幸运的是，我似乎发现了一个窍门，请检查我的新回复。 –

问题是简单的布局模型。您可以添加overflow：隐藏，以便在大多数浏览器中对元素进行布局：

ul li .info { 
    overflow: hidden; 
}

也会解决它。您也可以选择固定宽度，但不是必需的。

奖金迂腐的帮助，你实际上并没有问：

您使用“返回false”，以防止默认事件。这有一个功能，就事件如何泡沫而言，这是更高效的。只需将事件传递到功能（你可以使用任何你想要的名字，但我把它称为“事件”为清楚起见），然后调用它preventDefault()：

$("#test_submit").click(function(event) { 
    event.preventDefault() 
// ... the rest of your code ... // 
});

来源

2011-11-20 03:46:55

感谢您使用'event.preventDefault（）'。但对于第一个答案，它不适用于'overflow：hidden;'。 –

我对你的小提琴进行了测试;它的工作原理与发布到答案的float plus宽度代码完全相同。也许浏览器兼容性的东西？什么浏览器/ OS？ –

Firefox和OS X Lion。顺便说一句，可能我的方式是最好的浏览器兼容性。 –

问题与jQuery的了slideDown（）

回答

相关问题