Question

I’m trying to add a slide left on mouseenter and slide right on mouseleave to multiple li classes that are being used by an image swap script already with a hover function.

<script type>
$(document).ready(function() {
    $('#thumb ul li a').hover(
            function() {
                var currentBigImage = $('#gallery img').attr('src');
                var newBigImage = $(this).attr('src');
                var currentThumbSrc = $(this).attr('rel');
                switchImage(newBigImage, currentBigImage, currentThumbSrc);
            },
            function() {}
            );
            function switchImage(imageHref, currentBigImage, currentThumbSrc) {
                var theBigImage = $('#gallery img');
                if (imageHref != currentBigImage) {
                theBigImage.fadeOut(250, function(){
                    theBigImage.attr('src', imageHref).fadeIn(250);
                    var newImageDesc = $("#thumb ul li a img[src='"+currentThumbSrc+"']").attr('alt');
                    $('p#desc').empty().html(newImageDesc);
                });
            }
    }
});
</script

When I try using the script below in the same script as the one above, under $('#thumb ul li a').hover(, it breaks the existing hover function that swaps images and the li classes don’t slide or do anything.

$(document).ready(function() {
    $('#thumb ul li a').hover(
        function(){
            $(this).stop().animate({left:'20px'}, 500)
        },
        function(){
            $(this).stop().animate({right:'20px'}, 500)
});

Should I run separate scripts, one to swap images and another to slide the links under #thumb ul li a that I have defined as li classes? Thanks!

Answer 1

Rather than using hover for both sets of bindings, why don’t you try using:

$('#thumb ul li a').bind("mouseenter", function() {});

and

$('#thumb ul li a').bind("mouseleave", function() {});

for one of your set of functions?

You could also try using namespacing in your bindings, such as:

.bind("mouseenter.name1", function() {})
.bind("mouseenter.name2", function() {})
.bind("mouseleave.name1", function() {})
.bind("mouseleave.name2", function() {})