0

すでにホバー機能を備えた画像スワップスクリプトで使用されている複数のliクラスに、mouseenterの左にスライドを追加し、mouseleaveの右にスライドを追加しようとしています。 

<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() {});

あなたの一連の機能の1つについて？

次のように、バインディングで名前空間を使用することもできます。

.bind("mouseenter.name1", function() {})
.bind("mouseenter.name2", function() {})
.bind("mouseleave.name1", function() {})
.bind("mouseleave.name2", function() {})
于 2011-06-20T10:58:09.413 に答える