Question

Not a clue what to call this question as it is an odd one.

Basically I have this code that moves an image slider along based on interactions with the left and right arrows. It worked fine yesterday and today after changing absolutely nothing it stopped working.

I’m assuming I’ve missed out a ; or a } or even a ) because this always seems to be the case with these stupid errors. I’m gunna run through and strip everything out to see where the problem is but in the mean time could someone look over this and just double check everything is written as it should be?

$(function(){   
    $("#rightArrow").hover(function() {
        $('.projectImages').animate({left: '-270px'}, 3000);
    });

    $("#leftArrow").hover(function() {
        $('.projectImages').animate({left: '0px'}, 3000);
    });

    $("#rightArrow").click(function() {
        $('.projectImages').css('left', '-270px');
        $('.projectImages').stop();
    });

    $("#leftArrow").click(function() {
        $('.projectImages').css('left', '0px');
        $('.projectImages').stop();
    });

    $(".arrow").mouseout(function() {
        $('.projectImages').stop();
    });
});

Cheers,
Sam

Answer 1

Should try this way:

$("#rightArrow").hover(function() {
    $('.projectImages').animate({left: '-270px'}, 3000);
},function() {
    $('.projectImages').stop();
});

$("#leftArrow").hover(function() {
    $('.projectImages').animate({left: '0px'}, 3000);
},function() {
    $('.projectImages').stop();
});

$.hover(infunc,outfunc) is a two parameter function, short version of for this: $.mouseenter(infunc).mouseleave(outfunc)

EDIT: using mouseover and mouseout like Felix said is the best way imho.