Question

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

Answer 1

为什么不尝试使用：

，而不是将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() {})

如何在小鼠中心和鼠标左侧滑动li类？

1 个答案: