CODEWITHSUNDEEP
javascriptjqueryhtmlcssmenu
Hector
Hector

Reputation: 7025

jquery - How do I slide down <li>'s starting from the last and so on

Hope all is well, i am trying to animated 6 list items up and down.

when it goes down i want it to start from last to first and when it comes up i just want the whole list to go up.

My list item look like this:

<ul>
   <li>Menu item 1</li>
   <li>Menu item 2</li>
   <li>Menu item 3</li>
   <li>Menu item 4</li>
   <li>Menu item 5</li>
   <li>Menu item 6</li>
</ul>

I didn't add any jquery here because I really cant figure out where to start, I know how to make it slide up and down but I cant make it slide down starting from last to first..

If anyone can point me in the right direction, I would really appreciate it.

Thanks.

Upvotes: 0

Views: 205

Answers (3)

Michael
Michael

Reputation: 7374

Something like this?

http://jsfiddle.net/ej5x29q7/4/

HTML

<label for="click-me">Click ME</label><input type="checkbox" id="click-me">

<ul>
    <li>Menu item 1</li>
    <li>Menu item 2</li>
    <li>Menu item 3</li>
    <li>Menu item 4</li>
    <li>Menu item 5</li>
    <li>Menu item 6</li>
</ul>

JavaScript

ul {
    margin: 3em 0;
}

ul li {
    transition-duration: 800ms;
}

li:nth-child(1) { transform: translateY(-100%); }
li:nth-child(2) { transform: translateY(-200%); }
li:nth-child(3) { transform: translateY(-300%); }
li:nth-child(4) { transform: translateY(-400%); }
li:nth-child(5) { transform: translateY(-500%); }
li:nth-child(6) { transform: translateY(-600%); }


input[type=checkbox]:checked + ul li:nth-child(1) { transition-delay:2000ms; }
input[type=checkbox]:checked + ul li:nth-child(2) { transition-delay:1600ms; }
input[type=checkbox]:checked + ul li:nth-child(3) { transition-delay:1200ms; }
input[type=checkbox]:checked + ul li:nth-child(4) { transition-delay: 800ms; }
input[type=checkbox]:checked + ul li:nth-child(5) { transition-delay: 400ms; }
input[type=checkbox]:checked + ul li:nth-child(6) { transition-delay:   0ms; }


input[type=checkbox]:checked + ul li { transform: none }

Upvotes: 1

4dgaurav
4dgaurav

Reputation: 11506

Demo

html

<h1> Click on list </h1>

<ul>
    <li>Menu item 1</li>
    <li>Menu item 2</li>
    <li>Menu item 3</li>
    <li>Menu item 4</li>
    <li>Menu item 5</li>
    <li>Menu item 6</li>
</ul>

js

$("li").click(function () {
    var prev = $(this).prevAll();
    $.unique(prev).each(function (i) {
        $(this).slideUp(function () {
            $(this).appendTo(this.parentNode).slideDown();
        });
    });
});

Upvotes: 0

Gary Storey
Gary Storey

Reputation: 1814

Not sure if this is what you mean or not, but you can flip the order of the list like this:

var $sel = $("ul"),
    list = $sel.find('li').get().reverse();
$sel.empty().append(list);

Upvotes: 0

Related Questions