Question

我的图像很少，当其中一个被按下时，我希望其他图像淡出。

<body>
    <script src="Scripts/jquery-2.0.3.min.js"></script>
    <img class="images" id="img" src="/images/user1.png" height="100" width="100">
    <img class="images" id="img2" src="/images/user2.png" height="100" width="100">
    <img class="images" id="img3" src="/images/user3.png" height="100" width="100"><br>

    <script>
        $(document).ready(function () {

            $('#img').mouseover(function () {
                $(this).css('cursor', 'pointer');
            });
            $('#img2').mouseover(function () {
                $(this).css('cursor', 'pointer');
            });
            $('#img3').mouseover(function () {
                $(this).css('cursor', 'pointer');
            });
        });

        $(document).on('click', '.images', function (event) {
            $(event.target.id).fadeIn(1000);
            $(".images:not(#" + event.target.id + ")").fadeTo("fast", 0.5);

        });


    </script>


</body>

问题是，当我按下第一个按下的不同图像时，所有图像都保持淡出。它看起来像我为压缩图像添加的fadein不起作用。

Answer 1

有两点需要注意：

“$（event.target.id）”不是有效的选择器。你可以写 “$（'＃'+ event.target.id）”但“$（event.target）”更容易。
jQuery“fadeIn”函数只会从不透明度淡出：0到不透明度：1，不得来自任何其他值。

你最终得到了什么：

$(document).ready(function () {
    $('img').click(function(event) {
        $(event.target).fadeTo(500, 1.0);
        $('img').not(event.target).fadeTo(500, 0.5);
    });
});

Here's a working fiddle

Answer 2

您需要将要点击的内容发送到fadeTo("fast",1)

$(document).on('click', '.images', function (event) {
    $(".images:not(#" + event.target.id + ")").fadeTo("fast", 0.5);
    $(this).fadeTo("fast", 1); // This is the new line
});

DEMO

Answer 3

我建议您删除代码并执行此操作：

<强> CSS

.images {
    cursor:pointer;
}

<强>的jQuery

$(document).on('click', '.images', function () {
    $('.images').not(this).fadeTo("fast", 0.5);
    $(this).fadeTo(1000,1);
});

<强> jsFiddle example

Answer 4

我认为你的问题的答案更接近：

 $("#"+event.target.id).fadeTo("fast" , 1);
 $(".images:not(#" + event.target.id + ")").fadeTo("fast", 0.5);

Jquery淡入图像

4 个答案: