javascript - html 元素的自定义 jQuery slider 不起作用

Question

我正在尝试添加一个 slider 来为我的主屏幕上的某些段落添加动画效果。 我不想使用任何插件。 我想使用 jQuery 自己创建它。但有一个问题，似乎 jQuery 中的条件不起作用。

请检查以下代码并尝试修复它。

<div id="slider-viewport">
  <div class="slider">
    <p>1 Cloud based e-commerce solution for your downloadable products</p>
    <p>2 Cloud based e-commerce solution for your downloadable products</p>
    <p>3 Cloud based e-commerce solution for your downloadable products</p>
    <p>4 Cloud based e-commerce solution for your downloadable products</p>
  </div>
</div>

CSS

.slider p {
    font-size: 25px;
    color: #fff;
    height: 100px;
    margin: 0;
}

#slider-viewport {
    width: 100%;
    height: 100px;
    overflow: hidden;
    background-color: black;
}

.slider {
    width: 100%;
    height: auto;
}

jQuery

$(document).ready(function() {

    $('.slider p').first().clone().appendTo('#slider-viewport .slider')

    function slider() {

        var $slider = $('#slider-viewport .slider');
        var currentMargin = $slider.css('margin-top');
        var paraHeight = $('.slider p').height();
        var setMargin = parseInt(currentMargin) - paraHeight;
        var resetMargin = -300;

        if (currentMargin < resetMargin) {
            $slider.css('margin-top', 0);
        };

        $slider.animate({
            marginTop: setMargin
        }, {
            duration: 600,
            easing: "easeOutQuint"
            }
        );
    };

    setInterval(slider, 3000);

});

Answer 1

您可以通过仅对第一个元素进行动画处理，然后在动画处理后重置并将其放回列表末尾来稍微简化一下事情，您也可以通过使函数避免 setInterval()递归

function slider() {
    var $slider = $('#slider-viewport .slider');
    var $first = $slider.find('p:first');

    $first.delay(3000).animate({'margin-top': $first.height() * -1}, 600, "easeOutQuint", function () {
        $(this).css('margin-top', 0).appendTo($slider);
        slider();
    }); 
};

$(document).ready(function () {
    slider(); 
});

<强> Demo fiddle