CODEWITHSUNDEEP
cssjavascriptjquery
Ron
Ron

Reputation: 4095

CSS change style/animate style using class or javascript?

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?

Upvotes: 2

Views: 4856

Answers (1)

Rich Bradshaw
Rich Bradshaw

Reputation: 72975

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

Upvotes: 4

Related Questions