Question

我有一组缩略图，我想在选择另一个缩略图时减少到40％。原始缩略图将保持100％不透明度。我需要为淡出的缩略图设置一个通用版本，这样点击页面上的任何位置都会使其他拇指恢复到100％的不透明度。

以下是演示：http://www.dumstr.com/sofeb11/stash/

JS：

$(function() {           
    $("div#fadeout .stashthumb").click(function () {             
            $(this).siblings().stop().animate({opacity: 0.4}, 300);   
    },          
    function () {      
            $("div#fadeout .stashthumb").stop().animate({opacity: 1.0}, 300);       
    });

HTML

<div id="fadeout" class="stasher">

     <div style="opacity: 1;" class="stashthumb">
     <span><a href="#"><img src="img/stash-01.jpg"></a></span>
     </div>
</div>

谢谢！

Answer 1

将您的javascript更改为此（我认为这是您想要的行为，您的问题对我来说不是100％明确）：

$(function() {           
    $("div#fadeout .stashthumb").click(function (event) {             
        $(this).siblings().stop().animate({opacity: 0.4}, 300);       
        $(this).stop().animate({opacity: 1.0}, 300); 
        event.stopPropagation();     // don't fire the body click handler
    });

    // here's the "anywhere on the page" part you wanted
    $("body").click(function() {
        $("#fadeout .stashthumb").stop().animate({opacity: 1.0}, 300);
    });   
});

Answer 2

以Digitlworld的答案为基础

$("div#fadeout .stashthumb").click(function (e) {
    e.stopPropagation(); // This will stop the click bubbling up to the body
    $(this).removeClass('thumb40').addClass('thumb100');
    $('.stashthumb').not(this).removeClass('thumb100').addClass('thumb40');
});

$(body).click(function() {
    $('.stashthumb').removeClass('thumb40').addClass('thumb100');
});

Answer 3

我使用分配给缩略图的CSS类获得40％不透明度，另一个使用100％不透明度。

当我想要将所有这些淡入淡出时，我会使用jQuery $(".thumb40")或类似的东西来选择褪色的并使用jQuery函数将其CSS类设置为.thumb100课间褪色。 jQuery toggleClass

要淡出当前的所有内容，请使用类似的jQuery .thumb100，但请输入检查代码以确保您要更改为.thumb40的那个不是您选择的那个。

至于点击，我自己很好奇。

Answer 4

像这样修改你的jQuery：

    $("div#fadeout .stashthumb").click(function (e) {
    $(".stashthumb").animate({opacity: 1},300);    
            $(this).siblings().stop().animate({opacity: 0.4}, 300);   
            e.stopPropagation();
    });
$("body #fadeout:not(.stashthumb)").click(function () {
    $(".stashthumb").animate({opacity: 1},300);
});

这是一个工作示例jsFiddle

Jquery为缩略图设置不透明度，除了选中的一个

4 个答案: