1

私はjqueryとサムネイルを使用してWebサイトで作業しています。

ページが読み込まれると、すべてのサムネイルが不透明度の60％になる必要があります。マウスを親指の上に置くとすぐに100％にフェードする必要があります。マウスを外に動かすと、サムネイルは不透明度の60％までフェードバックする必要があります。

ユーザーがサムネイルをクリックすると、不透明度が100％に保たれる必要があります。ユーザーが別のサムネイルをクリックするとすぐに、「古い」サムネイルは60％にフェードバックし、「新しい」サムネイルは100％のままにする必要があります。（マウスをその上に置くため、すでに100％の不透明度があります）。

これは私がこれまでに持っているコードです：

$(window).bind("load", function () {
    $("#mycarousel li").fadeTo(1, 0.6);

    $("#mycarousel li").hover(function () {
        $(this).fadeTo(350, 1.0);
        $(this).addClass('Active');
    }, function () {
        $("this:not('.Active')").fadeTo(350, 0.6);
    });
});

どんな助けでもいただければ幸いです。

4

1 に答える 1

7 
$(window).bind("load", function() {
    var activeOpacity   = 1.0,
        inactiveOpacity = 0.6,
        fadeTime = 350,
        clickedClass = "selected",
        thumbs = "#mycarousel li";

    $(thumbs).fadeTo(1, inactiveOpacity);

    $(thumbs).hover(
        function(){
            $(this).fadeTo(fadeTime, activeOpacity);
        },
        function(){
            // Only fade out if the user hasn't clicked the thumb
            if(!$(this).hasClass(clickedClass)) {
                $(this).fadeTo(fadeTime, inactiveOpacity);
            }
        });
     $(thumbs).click(function() {
         // Remove selected class from any elements other than this
         var previous = $(thumbs + '.' + clickedClass).eq();
         var clicked = $(this);
         if(clicked !== previous) {
             previous.removeClass(clickedClass);
         }
         clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
     });
});
于 2009-05-23T12:03:56.360 に答える