Question

现在，当您单击下一个按钮时，您将获得一个平滑的动画，但是当您到达左侧视图中并且附加到包装器时分离的div的副本时，滑动动画会得到一些断断续续。我希望它在开始时始终保持平滑。我猜这个问题是我正在添加.css({"margin-left" : "5px"})并且正在弄乱原始的滑动功能 - $(".element").eq(0).css({"margin-left" : "-245px"})我必须添加边距5px否则新附加的div没有显示任何利润。（他们互相盯着）

$(document).ready( function(){
        $(".next").on("click", function(){
            $(".element").eq(0).css({"margin-left" : "-245px"}).delay(1000).queue(function(next){
                $(this).css({"margin-left" : "5px"}).appendTo(".wrapper");
                 $(this).dequeue();
            })
        })
 });

的CSS：

.mgcont{
    margin:5% auto;
    width:970px;
    overflow: hidden;
    border: 2px solid gray;
}
.wrapper{
    /*overflow: hidden;*/

    white-space: nowrap;
    width:960px;

}
.element{
    width: 240px;
    height: 300px;
    background: tomato;
    display: inline-block;
    margin-left: 5px;
    transition: margin-left 1s;
}
.prev{
    float: right;
}

HTML：

<div class="mgcont">
    <button class="next">next</button>
    <button class="prev">PREV</button>
    <div class="wrapper">
        <div class="element">1</div>
        <div class="element">2</div>
        <div class="element">3</div>
        <div class="element">4</div>
        <div class="element">5</div>
        <div class="element">6</div>
    </div>
</div>

Answer 1

这看起来像是由于这样一个事实，即基于初始标记，inline-block样式是在每个块后添加额外的~4-5像素，{{3 }}。然而，关于jQuery附加的东西正在调整标记，以便额外的填充在第二轮消失（可能通过剥离标记之间的空间）。

通过使负边距比其实际宽度（{"margin-left" : "-245px"}）要求的多5个像素（width: 240px），看起来您正在补偿初始额外填充。在第一次复飞中，这使得＆＃34; next＆＃34;块似乎或多或少地落在它的位置。但是在随后的循环中，它移动了元素并且＃34;因此跳回来。

要解决：

第一步是将负边距效果更改为使用与块相同的宽度，即{"margin-left" : "-240px"}。然而，仅这一点使第一个循环有一点跳跃性（虽然在我看来并不明显），所以：
接下来将处理额外的填充。我想你有几个选择。：
- 最简单的方法是使用float: left;代替display: inline-block。 Float没有额外的填充问题。但如果浮动产生更多问题，你可以试试：
- 使用上述链接中描述的其他CSS hack，例如将.wrapper设置为font-size: 0;和.element＆＃34;返回＆＃34;到font-size: 16px。的Bleh。
- 手工重写标记。打哈欠和半。并非总是可能。
- 通过执行以下操作，重复使用jQuery重写标记：
```
$(".element").each(function(){
  $(this).appendTo(".wrapper");
});
```
  虽然这也感觉很黑（但我不知道它可能会产生什么样的后果）。

在这个div幻灯片放映中，在左边滑动之后有不一致的边距跳跃。它在第二个周期开始

1 个答案: