CODEWITHSUNDEEP
jqueryhtml-lists
metur
metur

Reputation: 13

rotating list item

I have created a list item which rotates but I would like to introduce two buttons to control the list. The first button should basically let the list-item move upwards and the second bottom should do the reverse, that is let the list-items slide down.

This is the code i am using to rotate the list is here

Thanks

Upvotes: 1

Views: 1024

Answers (2)

Caspar Kleijne
Caspar Kleijne

Reputation: 21864

split give the buttons two classes .up and .down and attach the events

working version on fiddle here or here

$(".up").click(function(){
    $("ul li:first").slideUp('slow', function () {
         $("ul li:last").after($(this));
    }).slideDown('slow');
});

$(".down").click(function(){
    $("ul li:last").slideUp('slow', function () {
         $("ul li:first").before($(this));
    }).slideDown('slow');
});

Upvotes: 1

tobias86
tobias86

Reputation: 5029

It sounds like you're trying to control the direction of the list's rotation. If so, try this:

var direction = 'down';

    $(document).ready(function () {
        var swap = function () {
            if (direction == 'down') {
                $("ul li:last").slideUp('slow', function () {
                    $(this).remove();
                    $("ul").prepend($(this));
                    $(this).slideDown('slow', function () {
                        swap();
                    });
                });
            }
            else {
                $("ul li:first").slideDown('slow', function () {
                    $(this).remove();
                    $("ul").append($(this));
                    $(this).slideUp('slow', function () {
                        swap();
                    });
                });
            }
        }
        swap();
    });

Then all your buttons need to do is change the value of "direction", e.g. 

onclick="direction = 'up';"

Upvotes: 1

Related Questions