Как мне сдвинуть li-классы влево и вправо при отпускании мышью? - PullRequest
Новая
       17

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

0 голосов
/ 20 июня 2011

Я пытаюсь добавить слайд влево на указателе мыши и вправо на указателе мыши к нескольким классам 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?Спасибо!

1 Ответ

1 голос
/ 20 июня 2011

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

$('#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() {})
...