Как сдвинуть классы li влево при входе мыши и вправо при выходе из мыши?

Я пытаюсь добавить слайд слева от mouseenter и слайд справа от mouseleave для нескольких классов li, которые уже используются сценарием обмена изображениями с функцией наведения.

<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

Когда я пытаюсь использовать приведенный ниже сценарий в том же сценарии, что и приведенный выше, под $('#thumb ul li a').hover(, он ломает существующую функцию наведения, которая меняет местами изображения, а классы li не скользят и ничего не делают.

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

Должен ли я запускать отдельные сценарии, один для обмена изображениями, а другой для перемещения ссылок под #thumb ul li a, которые я определил как классы li? Спасибо!


jquery slide mouseenter mouseleave
person dcd0181    schedule 20.06.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вместо того, чтобы использовать наведение для обоих наборов привязок, почему бы вам не попробовать использовать:

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

и

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

для одной из ваших функций?

Вы также можете попробовать использовать пространство имен в своих привязках, например:

.bind("mouseenter.name1", function() {})
.bind("mouseenter.name2", function() {})
.bind("mouseleave.name1", function() {})
.bind("mouseleave.name2", function() {})
person Ash Clarke    schedule 20.06.2011
comment
Не удалось заставить его работать и с этим, я предполагаю, что это как-то связано со сценарием, который я уже запускаю. - person dcd0181; 20.06.2011