CODEWITHSUNDEEP
jqueryanimation
Daniel Hollands
Daniel Hollands

Reputation: 6671

Animating my funky menu

I've been playing around with an idea for the navigation on a site I'm building for a friend. It's all going to be on one page, with the, various navigation links simply showing/hiding content as its clicked.

What I'm looking for help with, however, is animating the navigation once a link has been clicked - I've created a mock-up below:

http://jsfiddle.net/LimeBlast/pp9Hk/

As you can see, I've got a stack of boxes, each smaller than the last. If you click on one of the links, it'll automatically jump to the outer-edge boxes, with everything that was originally above/outside it, now appearing below/inside it.

The jQuery I created to do this is as follows:

$('#navigation').on('click', 'li', function(){
    var $self = $(this);
    $self.prevAll().addClass('clone');
    $('.clone').clone().removeClass('clone').appendTo('#navigation');
    $('.clone').remove();
});

I have no idea if this is the right way to do it, but it seems to work - all I want to achieve now is for some type of animation effect to be added to it, i.e: for the selected element to slowly make its way to the outside edge, as the the elements above it appear in the inside...

(if you know what I mean?)

Can anyone help me out with this please? I'm not very good with jQuery.

Upvotes: 2

Views: 86

Answers (2)

mchail
mchail

Reputation: 831

One problem I noticed is that each menu item could only be selected once, since your cloned version wouldn't have the jQuery click listener attached. I fixed that by delegating the event, like so:

$('#navigation').on('click', 'li', function () {
    var $self = $(this);
    $self.prevAll().addClass('clone');

    $('.clone').clone().removeClass('clone').appendTo('#navigation');
    $('.clone').remove();
})

Demo here: http://jsfiddle.net/mchail/pp9Hk/4/

UPDATE

I took a crack at doing the animation. Demo here: http://jsfiddle.net/mchail/pp9Hk/5/

I moved the positioning out of css and into javascript. When an element is clicked, it is moved to the beginning of the list of lis, and each element is repositioned according to its new order in the list. jQuery's animate function makes it easy to add an animation during this change in positioning (it's also more browser-compatible than using css3 transitions).

Check out the animate docs here if you want to play with the easing: http://api.jquery.com/animate/

Upvotes: 1

Blazemonger
Blazemonger

Reputation: 92893

Since you're cloning elements, you need to use event delegation:

$('#navigation').on('click', 'li', function(){

This was in your question, but not in your original fiddle.

However, you can save yourself a lot of trouble by just prepending the selected li (and the items following it) to the list. Doing this will move the existing element, eliminating the need to clone anything.

var $self = $(this);
$self.nextAll().addBack().prependTo('#navigation');

http://jsfiddle.net/mblase75/8KrHh/

Upvotes: 0

Related Questions