1

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

matture
  • 297
  • 5
  • 17

3 Answers3

2

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

Kevin B
  • 94,570
  • 16
  • 163
  • 180
1

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!

Community
  • 1
  • 1
Patrick Engström
  • 51
  • 1
  • 2
  • this works perfectly on the jsfiddle but when i put it into my html the transition is very choppy, there is no animation it just turns into the other class. am i doing something wrong? – matture Jan 10 '12 at 20:01
  • The Transition between the class changes comes with the jquery UI on the JSFiddle. [link](http://jqueryui.com/docs/toggleClass/). Since you had checked jqueryUI on your fiddle I kept it in my fiddle. You could use .animate() but then you would have to specify all the values to change and check on which one is active. – Patrick Engström Jan 13 '12 at 17:57
1

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

Mark Coleman
  • 40,542
  • 9
  • 81
  • 101
  • this works perfectly on the jsfiddle but when i put it into my html the transition is very choppy, there is no animation it just turns into the other class. am i doing something wrong? – matture Jan 10 '12 at 20:00
  • Adjust the fiddle with your actual code and I might be able to help further. – Mark Coleman Jan 10 '12 at 20:26
  • http://jsfiddle.net/fyP9A/78/ it works perfect in the fiddle, but it doesnt animate in my actual html. – matture Jan 10 '12 at 20:28