Слайд Div через страницу, используя JQuery / CSS - PullRequest
Новая
       20

Слайд Div через страницу, используя JQuery / CSS

0 голосов
/ 13 февраля 2019

Я использовал следующий код, который делает его каждый раз, когда вы нажимаете на 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>

У кого-нибудь есть идеи?

Спасибо

Ответы [ 2 ]

0 голосов
/ 13 февраля 2019

Аналогично ответу Зака ​​(но проще, ИМХО), я обнаружил, что следующее работает для вас 

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)
0 голосов
/ 13 февраля 2019

Сортировка с использованием следующих настроек: 

<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>

Возможно, это лучший способ сделать это, но он работает нормально и прокручивает каждую из них.

...