使用 JQuery/CSS 跨页滑动 Div

Posted

技术标签:

【中文标题】使用 JQuery/CSS 跨页滑动 Div【英文标题】:Slide Div Across Page using JQuery/CSS 【发布时间】:2019-07-07 13:24:48 【问题描述】:

我使用了下面的代码,它使得每次点击 div 时它都会动画并在页面上移动,从而在它之后移动下一个。

http://jsfiddle.net/jtbowden/ykbgT/2/

但是,我正在尝试使其每 3 秒自动滚动一次,而无需单击。我已经尝试使用计时器对 javascript 进行以下调整,但它似乎只是显示出来并且不能正确滚动:

<script>

    $('.box').click(function () 

        $(this).animate(
            left: '-50%'
        , 500, function () 
            $(this).css('left', '150%');
            $(this).appendTo('#container');
        );

        $(this).next().animate(
            left: '50%'
        , 500);
    );

    $(document).ready(function ()
    

        setInterval(function ()
        

            $('.box').click();
            console.log("BOX CLICKED.");

        , 3000);

    );


</script>

有人有什么想法吗?

谢谢

【问题讨论】:

【参考方案1】:

类似于 Zack 的回答(但更简单,恕我直言),我发现以下内容适合您

id = 1

setInterval(function()
    $('#box' + id).animate(
        left: '-50%'
    , 500, function() 
        $(this).css('left', '150%');
        $(this).appendTo('#container');
    );

    $('#box' + id).next().animate(
        left: '50%'
    , 500);

    id = id <= 5 ? id + 1 : 1;
,4000)

【讨论】:

更好的方法。当涉及到这样的小调整时,我很傻。【参考方案2】:

使用以下调整对其进行排序:

<script>

    ActiveDashboards = ;
    ActiveDashboards["Projects"] = true;
    ActiveDashboards["SHEQs"] = false;
    ActiveDashboards["HR"] = false;

    function ShowNextDashboard()
    

        if (ActiveDashboards["Projects"] == true)
        
            //Hide this one.
            $('#box1').animate(
                left: '-50%'
            , 500, function () 
                $('#box1').css('left', '150%');
                $('#box1').appendTo('#container');
            );


            //Show SHEQs one.
            $('#box2').animate(
                left: '50%'
            , 500);

            ActiveDashboards["Projects"] = false;
            ActiveDashboards["SHEQs"] = true;

        
        else if (ActiveDashboards["SHEQs"] == true)
        

            //Hide this one.
            $('#box2').animate(
                left: '-50%'
            , 500, function () 
                $('#box2').css('left', '150%');
                $('#box2').appendTo('#container');
            );


            //Show HR one.
            $('#box3').animate(
                left: '50%'
            , 500);

            ActiveDashboards["SHEQs"] = false;
            ActiveDashboards["HR"] = true;

        
        else if (ActiveDashboards["HR"] == true)
        

            //Hide this one.
            $('#box3').animate(
                left: '-50%'
            , 500, function () 
                $('#box3').css('left', '150%');
                $('#box3').appendTo('#container');
            );


            //Show Projects one.
            $('#box1').animate(
                left: '50%'
            , 500);

            ActiveDashboards["HR"] = false;
            ActiveDashboards["Projects"] = true;
          

    


    $(document).ready(function ()
    

        setInterval(function ()
        

            ShowNextDashboard();

        , 4000);

    );


</script>

可能是一种更好的方法,但它工作正常并且可以滚动浏览每一个。

【讨论】:

以上是关于使用 JQuery/CSS 跨页滑动 Div的主要内容,如果未能解决你的问题,请参考以下文章

vue 底部页面滑动,里面div不能滑动的解决

使用 jQuery 同时向下滑动 div 和 .fadeIn() 内容,反之亦然?

js移动div怎么做出滑动的效果?

使 div 高度为向下滑动的距离

使用 animate() 滑动 div,隐藏它

使用 animate() 从右向左滑动 div