jquery - Jquery - 鼠标悬停 -> 淡入/淡出 // 点击 -> 不透明度 100% // 其他点击 -> 不透明度 60

Question

我正在一个带有 jquery 和缩略图的网站上工作。

加载页面时，所有缩略图都必须为 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);
    });
});

任何帮助，将不胜感激。

Answer 1

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