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

Jquery - 鼠标悬停 - ＆gt;淡入/淡出//点击 - ＆gt;不透明度100％//其他点击 - ＆gt;不透明度60

1 个答案: