jQuery高度动画错误答案

【问题标题】：Jquery height animation bugjQuery高度动画错误
【发布时间】：2013-03-29 14:26:02
【问题描述】：

我无法发布我的全部源代码，因为它很大，但也许有人可以解释一下，因为我确信其他地方也会发生这种情况。

我有一个带有圆形边缘的 DIV，使用 jquery 时，div 在两个高度之间切换。

奇怪的是，它确实在右侧，随着 DIV 的增长或缩小，右侧的一些像素被切掉了。使 div 看起来更薄，右下角变得尖锐（由于被舍入的 par 被截断）。动画完成后，

我正在尝试制作流畅的动画，但这会让人分心。

项目现状

http://eyerislabs.com/CurrentProject/

【问题讨论】：

你能在 jsfiddle 上创建一个 SSCCE 吗？
你在这个div上设置了固定宽度吗？如果没有代码，我相信每个人都会对这个问题感到茫然。
我需要像现在一样上传网站，它使用 Bootstrap，所以对于 Jsfiddle 来说有点太复杂了。 eyerislabs.com/CurrentProject
如果您发布整个网站，这很难帮助您，我的建议是当您在jsfiddle 中执行动画时，它只是加载和您的 div 和事件处理程序的示例
如果您的问题是过渡时过渡不平滑，我建议您在切换过渡之前计算宽度并在过渡期间应用。

标签： jquery html css animation

【解决方案1】：

试试这个

现场小提琴here

HTML

<div class="main_div">
    <span class="div_title">Which is your favourite car brand ? </span>
    <ul class="inner_list">
        <li>Car1</li>
        <li>Car2</li>
        <li>Car3</li>
    </ul>
</div>

<div class="main_div">
    <span class="div_title">Which is your favourite food ? </span>
    <ul class="inner_list">
        <li>food1</li>
        <li>food2</li>
        <li>food3</li>
    </ul>
</div>

CSS

.main_div{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px dotted green;
    width:275px;
}

.div_title{
    font-size:15px;
    font-style:italic;
}

jQuery

$(".inner_list").hide();
$(".main_div").click(function(){
    $(".inner_list", this).slideToggle("slow");
});

【讨论】：