jquery - 在自定义内容 slider 中滑动时出现空白/间隙问题

Question

我正在尝试制作一个自定义内容 slider 。快完成了，但是在滚动时遇到背景白色的问题。

每个 slider 之间都有一个间隙或空间。

我创建了一个 fiddle 以便您可以查看 slider 。

<ul id="slider">
    <li class="case_study" id="case_study1">Div Slide 1 <div class="right"></div></li>
    <li class="case_study" id="case_study2">Div Slide 2 <div class="right"></div></li>
    <li class="case_study" id="case_study3">Div Slide 3 <div class="right"></div></li>
</ul>

演示:http://jsfiddle.net/squidraj/6S6KT/2/

全屏:http://jsfiddle.net/squidraj/6S6KT/2/embedded/result/

请提出建议。

Answer 1

$('#slider li.case_study:first-child').animate({
    left: '-100%'
}, 300, function () { // The command function is a **CALLBACK**
    $('#slider li.case_study:first-child').css('left', '100%');

你上面的代码做了它应该做的事——我在你使用回调的地方添加了一条评论。

当第一个元素完成时会触发一个回调 - 所以此时您的脚本将第一个 div 向左移动 100% 然后它会将第二个 div 添加到屏幕并将其动画化到左侧。

您希望所有事情都发生在您的 .animate({},300) 子句中 - 如下所示:

将第二个 div 添加到第一个 div 的右侧 - 然后将两个 div 同时向左移动。

试一试 - 如果您遇到困难，请发布您的新代码 - 但看看您是否可以自己解决 - 它会帮助您学得更快!