Javascript Noob: How to emulate slideshow on front page by automatically cycling through existing hover states of main page links?

Question

hey everyone. hope you could help me out

am working on this website and i've finished all the hover effects i like - they're exactly how i want them to be: http://s5ent.brinkster.net/beta3.asp - try hovering over the four links and you'll see a very simple fade effect at work, which degrades into a regular css hover without javascript.

what i plan to do is to make the page look like it had a fancy slideshow going on upon loading and while idle, and i wanted to achieve that by capitalizing on the existing hover styling/behavior of the main page links instead of using another script to create the effect from scratch.

to do this i imagined i'll need a script that emulates a hover action on each link at regular time intervals once the page has loaded, starting from left to right (footcare, lawn & equipment, about us, contact us), looping through all 4 links indefinitely (footcare, lawn & equipment, about us, contact us, footcare, lawn& equipment, etc.) but pauses when any of them have been actually hovered over by a viewer and resumes from wherever the user left off upon mouseout. hope you get my drift...

i also want to achieve this without unnecessarily disrupting the current html. so i guess everything will have to be done by scripting as much as possible..

i'm very new to javascript and jquery. as you can see at s5ent.brinkster.net/beta3.1-autohover.asp, the following script i made works wrong: it hovers-on all of them at the same time and doesn't hover-out anymore. when you try to actually hover into and out of each link the link just comes back on:

<script type="text/javascript">
$(document).ready(function () {
    var speed = 5000;
    var run = setInterval('rotate()', speed);
});
function rotate() {
    $('.lilevel1 a').each(function(i) {
        $(this).mouseover();
    });
}
</script>

it's just gross. aside from the fact that this last bit of script isn't even working in ie.

could you please help me make this thing happen? that'd be really sweet, guys. i know there are tonsa geniuses out there who could whip this up in no time. or if you have a better way to go about it by all means kindly lemme know.

thanks guys, hope you're all havin a blast.

Answer 1

I wouldn't try to emulate the hover state by manually triggering mouseover. Instead of making your script cause a hover, try to make your script do the same thing that hover does.

You already have the following for the hover function:

$(this).hover(function(){ ... });

Instead, lift out that anonymous function, like this:

function onImageHover(link) { ... }
$(this).hover(function() { onImageCursor($(this)); });

And then in your rotate script, you can also call onImageHover for the same effect. I could have written line 2 above as just $(this).hover(onImageCursor) but I'm passing the object as a reference, so that I don't have to hack away with apply calls in order to create the same effect in rotate.

Other than that; in your current script, each time rotate is called, it runs the same code for all lilevel1 links. You just want to show the following, so you have to use a cursor of some kind to keep track of where in the rotation you are:

var rotateCursor = -1;
var imageCount = 4;
function rotate() {
    rotateCursor++;
    if(rotateCursor >= imageCount) rotateCursor = 0;

    onImageHover( $('.lilevel1 a').eq(rotateCursor) );
}

Answer 2

(sorry, i can't fit this into the comment box. this is a response to the first answer by David Hedlund) i'm trying to get past the first step, lifting out the anonymous function. i can't make it work. help:

original code:

$('#li1flnk').attr('id', 'li1fa');
$('#li1tlnk').attr('id', 'li1ta');
$('#li1alnk').attr('id', 'li1aa');
$('#li1clnk').attr('id', 'li1ca');

$('li.lilevel1 a').append('<span class="hover"><\/span>').each(function () {
    var $span = $('> span.hover', this).css('display', 'none');
    $(this).hover(function () {
        $span.stop(false, true).fadeIn('slow');
    }, function () {
        $span.stop(false, true).fadeOut('slow');
    });
});

supposedly "lifted out" code

$('#li1flnk').attr('id', 'li1fa');
$('#li1tlnk').attr('id', 'li1ta');
$('#li1alnk').attr('id', 'li1aa');
$('#li1clnk').attr('id', 'li1ca');

$('li.lilevel1 a').append('<span class="hover"><\/span>').each(function () {
    var $span = $('> span.hover', this).css('display', 'none');
    $(this).hover(onImageHover($(this)););
});

function onImageHover(link) {
    {
        $span.stop(false, true).fadeIn('slow');
    },

    {
        $span.stop(false, true).fadeOut('slow');
    }
}

what am i doing wrong? soo sorry am new to all this..

Answer 3

i finally made it work. if you guys could suggest how i could improve efficiency of the code then please do so. thanks so much. this script is at work at s5ent.com

<script><!--
// globally declare hover picker
var rotateCursor = -1;
var imageCount = 4;

$(document).ready(function () {

    // re-class links
    $('#li1flnk').attr('id', 'li1fa');
    $('#li1tlnk').attr('id', 'li1ta');
    $('#li1alnk').attr('id', 'li1aa');
    $('#li1clnk').attr('id', 'li1ca');

    // add hover class containing hover image to each link
    $('li.lilevel1 a').append('<span class="hover"><\/span>').each(function () {

        // hide hover elements from view
        var $span = $('> span.hover', this).css('display', 'none');

        // on hover span
        $(this).hover(function () {

            // stop current animation
            $('.lilevel1 a .hover').each(function () {
                $(this).stop(false, true).fadeOut('slow');
                $(this).parent().css('background-position', 'left top');
            });
            clearInterval(run);

            // hover proper
            $span.stop(false, true).fadeIn('slow');
        }, function () {

            // off hover proper
            $span.stop(false, true).fadeOut('slow');

            // resume animation
            run = setInterval('rotate()', speed);
        });
    });

    // call first animation
    rotate();

    // start animation after first call
    var speed = 4000;
    var run = setInterval('rotate()', speed);
});

function rotate() {

    //initialize cursor
    rotateCursor++;
    if (rotateCursor >= imageCount) rotateCursor = 0;

    // on hover effect
    $('.lilevel1 a .hover').eq(rotateCursor).fadeIn(500);
    $('.lilevel1 a').eq(rotateCursor).css('background-position', 'left 22px');

    // off hover effect
    setTimeout("$('.lilevel1 a .hover').eq(rotateCursor).fadeOut(500)", 3000);
    setTimeout("$('.lilevel1 a').eq(rotateCursor).css('background-position','left top')", 3000);
}

//--></script>