CODEWITHSUNDEEP
jquery
user3449355
user3449355

Reputation: 25

JQUERY divs slideUp only once but need to slide continuously

Hi i am trying to move the divs up with slideUp. the sliding up the divs happens only once, but i want to repeat this process continuously. below is my code. i am thankful if someone helps me.

function slidUp() {
    var delayMe = 0;
    $("#carousel div").siblings().each(function () {
        delayMe += 8000;
        $(this).delay(delayMe).slideUp(2000, "linear");
        $(this).find("#carousel div:last").after($(this).find("#carousel div:first"));
    }

    });
}

var run = setInterval(slidUp());

HTML:

<section id="carousel">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

CSS

#carousel {
    height:300px;
}
#carousel div {
    width:500px;
    border:1px solid #ccc;
    height:300px;
    position:relative;
}
#carousel div:first-child {
    background-color:#e01783;
}
#carousel div:nth-child(2) {
    background-color:#ff4e00;
}
#carousel div:nth-child(3) {
    background-color:#ffd141;
}
#carousel div:nth-child(4) {
    background-color:#6dcb99;
}
#carousel div:last-child {
    background-color:#e2b87f;
}

Upvotes: 0

Views: 627

Answers (2)

Serlite
Serlite

Reputation: 12258

Okay, well...it's a little bit unclear on what kind of behaviour you're aiming for, but I'll try to help anyways. Michal was right, your script doesn't cause the <div> elements to slide back down after they slide up - I assume this is what you want us to work out for you.

You do need to use setInterval(), which requires a time interval as an argument. Additionally, an extra curly brace in your code causes it to not work right off the bat - I'm a bit confused as to why you provided non-functional code, as your question seemed to indicate that it worked.

Anyways, here's a revised script that allows found continuous sliding up and down:

var slideTime = 2000;
var delayTime = 8000;

function slidUp() {
    var delayMe = 0;
    $("#carousel div").each(function () {
        delayMe += delayTime;
        $(this).delay(delayMe).slideUp(slideTime, "linear");
    });

    $("#carousel div").each(function () {
        $(this).delay(delayMe).slideDown(slideTime, "linear");
    });
}

slidUp();

var run = setInterval(slidUp, delayTime * 2 * 6);

I put the values into variables to make them a little easier to change quickly. The addition to the script basically tacks on a delayed slideDown() to all of the elements. The first call to slidUp() is just to get it started; subsequent calls are performed by setInterval(). Here's a JSFiddle to show you the code in action. Note that I reduced the delay time to 3000, otherwise it takes a while to see it reverse.

Alternatively, if you want the <div> elements to just jump right back into position rather than slide, you could use this script:

var slideTime = 2000;
var delayTime = 8000;

function slidUp() {
    $("#carousel div").height(300).show();
    var delayMe = 0;
    $("#carousel div").each(function () {
        delayMe += delayTime;
        $(this).delay(delayMe).slideUp(slideTime, "linear");
    });
}

slidUp();

var run = setInterval(slidUp, delayTime * 6);

Let me know if you have any questions!

Upvotes: 0

Michał
Michał

Reputation: 2484

You forgot to set time of interval.

var time = 10000; // time in ms
var run = setInterval(slidUp(), time)

Also you need to slideDown() your div so the animation has a chance to reappear.

function slidUp() {
    var delayMe = 0;
    $("#carousel div").siblings().each(function () {
        delayMe += 8000;
        $(this).delay(delayMe).slideUp(2000, "linear");
        $(this).find("#carousel div:last").after($(this).find("#carousel div:first"));
        $(this).slideDown(2000, "linear");
    });
}

Upvotes: 1

Related Questions