0

我正在尝试在 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 类的链接？谢谢！

4

1 回答 1

1

与其对两组绑定都使用悬停，不如尝试使用：

$('#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() {})
于 2011-06-20T10:58:09.413 回答