Why jQuery over CSS?


#1

What would be the advantage between using jQuery to change CSS Styles when we could just do it in CSS? Would it be for temporary jQuery only effects?
It seems like the majority of jQuery events can be performed with pure CSS.
Just curious.


#2

I mean its a choice i guess..... You can go for jQuery, or CSS. But in my oppinon jQuery is much easier than css(maybe bias since im a terrible front-end :wink:). But really...

For example lets see Slide left on hover in both jQuery and CSS

jQuery

$('.holdingbox').hover(function(){
    $('.rightbox').animate({width: '90px'}, 1000)
}, function(){
    $('.rightbox').animate({width: '-0'}, 1000)
});

CSS

HTML:

<div id="topmenu_wrap" class="clearfix">
    <ul class="links">
        <li class="menu-651 first"><a href="http://iittpm.com/" title="Home">Home</a>

        </li>
        <li class="menu-1990"><a href="http://iittpm.com/about-us/" title="About Us">About Us</a>

        </li>
        <li class="menu-652 last"><a href="http://iittpm.com/course/" title="Courses">Courses</a>

        </li>
    </ul>
    <ul class="links">
        <li class="menu-1990"><a href="http://iittpm.com/programs/" title="Programs">Programs</a>

            <ul class="child">
                <li><a href="http://iittpm.com/programs/" title="CCPM">Certificate Program In Project Management-CCPM</a>
                </li>
                <li><a href="http://iittpm.com/meri" title="CPTPM">Certificate Program In Telecommunication Project Management-CPTPM</a>
                </li>
            </ul>
            <li class="menu-651 first"><a href="http://iittpm.com/contact-us" title="Contact Us">Contact Us</a>

            </li>
        </li>
    </ul>
</div>

CSS:

#topmenu_wrap {
    position:absolute;
}
.links {
    float:left;
    border-left: 1px solid #63b8e6;
    margin-left:48px;
    padding-top: 4px;
    display: block;
}
#topmenu_wrap ul li {
    float:none;
    font-size: 13px;
    text-transform:uppercase;
    display: block;
    border-bottom: 1px solid #63b8e6;
}
#topmenu_wrap ul li a, #topmenu_wrap ul li span {
    color: #234e95;
    line-height: 12px;
    float: none;
    padding: 4px;
    display: block;
}
#topmenu_wrap ul li span {
    color: #555;
}
#topmenu ul li {
    float: none;
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}
#topmenu_wrap ul li a:hover {
    text-decoration:none !important;
}
.menu-1990:hover > .child {
    display:block;
    opacity:1;
    margin-left:60px;
    height:auto;
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
    
}
.child {
    transition: 1s;
    margin-left:0px;
    opacity:0;    
    height: 0;
    padding-left: 0px;
    display: block;
    width: 200px;   
    
}

DEMO

Conclusion

As above you can see css can is a little bit more complex...


#3

Normally you would use jQuery to change CSS once something is triggered for example, set the background to change once logged in or add removing a styling once something is clicked ect.