CODEWITHSUNDEEP
jqueryjquery-ui
matture
matture

Reputation: 297

jquery toggle animation not working

Hey so im trying to make this box animate up and then when you click it again to animate back to its original position but its just not working here is the non working jsfiddle http://jsfiddle.net/fyP9A/67/

thanks a lot

Upvotes: 1

Views: 1515

Answers (3)

Mark Coleman
Mark Coleman

Reputation: 40863

As Kevin said, you ran into an issue with css specificity. #sky has a higher specificity than .sky1 which causes it to not compute correctly. To fix this issue you need to create a selector with higher specificity than #sky, for example #sky.sky1 should do the trick

Side note:
You do not need to query the dom a second time in your .click(), you can simiply use $(this)

$(function() {
    $("#sky").click(function() {
        $(this).toggleClass("sky1");
    });
});

Updated fiddle

Upvotes: 1

Patrick Engström
Patrick Engström

Reputation: 51

The problem with your JS Fiddle is that the #sky css code is overwriting the .sky1 class due to CSS Selectors Priority.

I edited your JS Fiddle and changed #sky to .sky and thus .sky and .sky1 have the same priority and since .sky1 is later in the CSS code it overwrites .sky :) Hope that solved your problem!

Upvotes: 1

Kevin B
Kevin B

Reputation: 95065

Your css isn't specific enough. Making .sky1 div#sky.sky1 makes it work.

Upvotes: 2

Related Questions