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 stackoverflow.com/questions/1248542/…. — mario
– mario, Commented Nov 7, 2011 at 20:47
to allow css animation have look here stackoverflow.com/questions/1248542/…. — mario
– mario, Commented Nov 7, 2011 at 20:51

Rich Bradshaw · Accepted Answer · 2011-11-08 16:19:56Z

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 8, 2011 at 16:19

answered Nov 7, 2011 at 20:37

Rich Bradshaw

73.3k46 gold badges190 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Ron Over a year ago

Can you simplify your answer? ~as much as I could understand you want me to use css~

Rich Bradshaw Over a year ago

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.

Ron Over a year ago

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).

Rich Bradshaw Over a year ago

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.

Ron Over a year ago

-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...

|

Collectives™ on Stack Overflow

CSS change style/animate style using class or javascript?

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related