CSS change style/animate style using class or javascript?

Question

I am working on new website and I got question. Should I change style using class or javascript code, for example:

the class way:

$('.class').hover(function()
{
    $(this).addClass('nameofclass');
},function()
{
    $(this).removeClass('nameofclass');
}

the javascript way:

$('.class').hover(function()
{
    $(this).css('property','value');
},function()
{
    $(this).css('property','value');
}

same question about animate, but in order to use class in animate, I need to use plugin. should I use plugin to allow class animation?

to allow css animation with jquery have a look here http://stackoverflow.com/questions/1248542/jquery-animate-with-css-class-only-without-explicit-styles. — mario, Nov 07 '11 at 20:47
to allow css animation have look here http://stackoverflow.com/questions/1248542/jquery-animate-with-css-class-only-without-explicit-styles. — mario, Nov 07 '11 at 20:51

Rich Bradshaw · Accepted Answer · 2011-11-08T16:19:56.223

4

Change the class, then the style is set in the CSS, and the behaviour is in the JS.

This also has the advantage that you can use CSS transitions in browsers that support them, while using animate in old ones, by adding the transition property where needed, then using css instead of animate in jQuery in new browsers.

For instance, say you want to fade out a div:

CSS

.fade {
    opacity:0;
}

.box {
    width:100px;
    height:100px;
    background-color:red;
    -webkit-transition:all ease-in-out 0.6s;
    -moz-transition:all ease-in-out 0.6s;
    -ms-transition:all ease-in-out 0.6s;
    -o-transition:all ease-in-out 0.6s;
    transition:all ease-in-out 0.6s;
}

HTML

<div class="box"></div>

Your javascript can then look like this:

JS

$(document).ready(function() {
    $(".box").click(function(){
         $(this).toggleClass("fade");
    });
});

In non transition browsers, you just won't get a fade. To add that, you can use animate to animate to the properties.

For more info on transitions, have a look at http://css3.bradshawenterprises.com/.

edited Nov 08 '11 at 16:19

answered Nov 07 '11 at 20:37

Rich Bradshaw

71,795
44
182
241

Can you simplify your answer? ~as much as I could understand you want me to use css~ – Ron Nov 08 '11 at 16:09
I have added some more. You'd then use your animate to a class function to add animation in older browers, prob using Modernizr to check for transitions. – Rich Bradshaw Nov 08 '11 at 16:20
I see, thats not what I meant in my question. I want to make my website cross browser (even with old browsers such as IE) and therefore I cannot use css3. I wanted to know if there's difference between changing properties using JS only (i.e. code above) to changing properties using class and JS (i.e. code above). – Ron Nov 08 '11 at 17:29
Using CSS3 doesn't mean your site won't work in IE - that's what jQuery animate is for. What I'm saying is that by using classes to change things, you can easily get animations for free in any browser. For old IE you'll need to use the old inefficient jQuery animate instead, but it's better to have it just in IE than everywhere. – Rich Bradshaw Nov 08 '11 at 17:56
-webkit-transition:all ease-in-out 0.6s; -moz-transition:all ease-in-out 0.6s; -ms-transition:all ease-in-out 0.6s; -o-transition:all ease-in-out 0.6s; transition:all ease-in-out 0.6s; weight more than $(document).ready(function() { $(".box").click(function(){ $(this).toggleClass("fade"); }); });. the JS solution will work everywhere while the CSS will work only in browsers that support css3. also I will have to add condition to use the JS only when the browser doesn't support CSS3. its not efficient... – Ron Nov 08 '11 at 18:14
All browsers in use support transitions apart from IE9 and lower. Once IE10 is out then all browsers stable build support them. Remember that you are going to gzip the CSS and JS anyway, so the repetition makes little difference. The performance benefits in the smoothness of the animation and the hardware acceleration available when using transforms+transitions make this method a lot better. – Rich Bradshaw Nov 08 '11 at 19:55
Of course you need to determine the needs for your project based on your users, but for a new site, transitions are the way to go, especially as it's straightforward to add a fallback for old browsers. – Rich Bradshaw Nov 08 '11 at 19:56
In short, use the class method, not the css method as it makes adding animation trivial for CSS3 browsers, which should be your target, as that's most people (if not now, then within a year). – Rich Bradshaw Nov 08 '11 at 19:57
I see your point & I understand it. still, I prefer not to use the transforms + transitions. anyway, its not what I asked and I am still looking for answer to my question – Ron Nov 08 '11 at 20:27
You asked "Should I change style using class or javascript code". I'm saying class, because it has many benefits - one of which is that it makes adding animations very easy. – Rich Bradshaw Nov 08 '11 at 21:46

CSS change style/animate style using class or javascript?

1 Answers1