CODEWITHSUNDEEP
jquerycssjquery-animate
user2959040
user2959040

Reputation: 25

jQuery won't change css or animate... what am I doing wrong?

Here is the jsFiddle for what I have at the moment: https://jsfiddle.net/vst5fky5/

I am redoing a Flash section in jQuery. There is a logo and 7 inline list items (navigation) that I need to animate from the top. I want to use jQuery to add top:-5em at the beginning, then have them come down one by one.

Nothing is working. Note: the logo click function is only to test, I would like to have it change CSS, then run through the animations on page load.

$(document).ready(function(){
    $('.nav a li').css("top:","-5em");
    $('#logo').click(function(){
        $(".nav a li").animate({top:$(this).offset().top}, 'slow');
    });
});

Upvotes: 0

Views: 56

Answers (2)

Amit Soni
Amit Soni

Reputation: 1427

Use each() method to get one by one animation effect

$('.nav a li').css("top","-5em");
    $('#logo').click(function(){
        $(".nav a li").each(function(i,e){
          $(e).delay(i*1000).animate({top:$(e).offset().top}, 'slow');
    });
});

DEMO

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

Syntax issue. You have added extra : in the following syntax.

 $('.nav a li').css("top:","-5em");

should be 

 $('.nav a li').css("top","-5em");

DEMO

Upvotes: 1

Related Questions