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

任何帮助,将不胜感激.

Greatings,Bas

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