Question

say you have this code:

    $("#sub_nav_home1").hover(function () {
        $("#homepage").removeClass();
        $("#homepage").addClass("homepage1");
    });
    $("#sub_nav_home2").hover(function () {
        $("#homepage").removeClass();
        $("#homepage").addClass("homepage2");
    });
    $("#sub_nav_home3").hover(function () {
        $("#homepage").removeClass();
        $("#bhomepage").addClass("bhomepage3");
    });

    <ul class="nav sub_nav_home">
        <li id="sub_nav_home1"><a href="#"><span>LINK1</span></a></li>
        <li id="sub_nav_home2"><a href="#"><span>LINK2</span></a></li>
        <li id="sub_nav_home3"><a href="#"><span>LINK3</span></a></li>
     </ul>

IS there a way were we can only do the hover jquery functionality once, instead of one per link?

Hope that made sense

Cheers

Answer 1

Err, quickest way i can think of is (this will be dynamic too):

    $("#sub_nav_home a").hover(function () {
         $("#homepage").removeClass().addClass("homepage"+$(this).parent().attr('id').split('sub_nav_home')[1]);
    });

    <ul class="nav sub_nav_home">
        <li id="sub_nav_home1"><a href="#"><span>LINK1</span></a></li>
        <li id="sub_nav_home2"><a href="#"><span>LINK2</span></a></li>
        <li id="sub_nav_home3"><a href="#"><span>LINK3</span></a></li>
     </ul>

That will make the class homepage[the id number inside that’s parent] i.e. homepage1, homepage2, etc

–UPDATE–

This should work for you (but i didnt test it! Just let me know if it doesnt work)

//find the first li and add a class of current to start the loop
$('.sub_nav_home li:first').addClass('current');
//Here we set the loop
setInterval(function(){
    //Here we are checking if there IS a next item. If there IS it'll return 1
    //which will make this if() true (1 > 0)
    if($('.current').next().length > 0){
        //Here we grab the current .current, remove the class, get the next item
        //and then add .current to that
        $('.current').removeClass('current').next().addClass('current');
    }
    else{
        //If the if() fails (returns 0 [no next() item]) we'll get the current
        //.current, remove the class, get the parent, find the first item in the
        //parent (first <li> of the <ul>) and add a class of current
        $('.current').removeClass('current').parent().find(':first').addClass('current');
    }
},3000) //3000 = 3 seconds

P.S. if this works for you, make sure to give me an up vote 😉