Изменить непрозрачность всех элементов, кроме выбранного

ProgramBox

Изменить непрозрачность всех элементов, кроме выбранного

Post author:admin
Запись опубликована:29 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #css #opacity

#javascript #jquery #css #непрозрачность

Вопрос:

У меня есть три изображения на одной странице, и я хотел бы убрать элементы, на которые не нажимают. Скрипт работает в первом экземпляре, поэтому, если вы нажмете на одну картинку, две другие исчезнут. Если вы думаете щелкнуть по уже выцветшему изображению, все, что произойдет, это то, что последнее не выцветшее изображение также исчезнет, вместо того, чтобы оно было непрозрачным на 100%, а два других исчезли.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style>
.opac {
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
        border:thick;
}
</style>
<script>
$(document).ready(function(){
    $('a.images').click(function()
    {
        $(this).siblings().stop().animate({opacity: 0.4}, 300);
        $('a.images').click(function()
        {
            $not('this').stop().animate({opacity: 1.0}, 300);
    });
});
});
</script>






</head>


html

    <body>
        <div id="images">
        <a class="images" href="#"><img class="click" src="../appalachia.jpg" height="133" /><br/><br/></a>
        <a class="images" href="#"><img class="click" src="../appalachia.jpg" height="133" /><br/><br/></a>
        <a class="images" href="#"><img class="click" src="../appalachia.jpg" height="133" /><br/><br/></a>
        </div>

        </body>

    </html>

1. Вам больше не нужны -khtml-* правила, они устарели. Кроме того, не забудьте установить zoom: 1 значение trigger hasLayout в IE <= 7, иначе filter параметр не будет применен.

2. @Marcel: Вам нужны -webkit-* правила?

3. @Rocket: согласно MDC , plain opacity поддерживается всеми текущими браузерами на базе WebKit, так что: нет, они вам тоже не нужны. Кстати, то же самое верно для -moz-opacity .

Ответ №1:

Вы прикрепляете click обработчик внутри click обработчика. Каждый раз, когда вы нажимаете, новый обработчик щелчка будет добавляться и вызываться при каждом последующем нажатии.

Обработчики щелчков вызываются с последним добавленным, вызываемым первым, что означает, что в последнюю очередь все изображения становятся прозрачными.

Если вы хотите, чтобы изображение, на которое вы нажали, было непрозрачным, а остальные прозрачными, попробуйте следующее:

 $('a.images').click(function(){
    // Make all images (except this) transparent
    $('a.images').not(this).stop().animate({opacity: 0.4}, 300);
    // Make this opaque
    $(this).stop().animate({opacity: 1.0}, 300);
});

Демонстрация: http://jsfiddle.net/gCsRL/1 /

1. Извините, я выразился не совсем ясно :). У меня действительно был код, который работал подобным образом, но то, что я искал, заключалось в том, чтобы одновременно исчезал только один элемент. Итак, если вы нажали на картинку 1, то 2 и 3 исчезнут. Если вы нажмете на 3, 3 будет полностью непрозрачным, а 1 и 2 будут блеклыми. извините за двусмысленность.

2. @dzilla: Вопрос был ясен; этот комментарий неясен. Вы говорите «одновременно будет исчезать только один элемент», но затем вы говорите «исчезают 2 и 3». Чего именно вы хотите? Я добавил ссылку на демо-версию к своему ответу, нажмите на нее и попробуйте.

3. Знаете что? У меня был полный мозговой пердеж. Вы были правы! 🙂

Ответ №2:

В этом коде:

 $('a.images').click(function() {
    $(this).siblings().stop().animate({opacity: 0.4}, 300);
    $('a.images').click(function() {
        $not('this').stop().animate({opacity: 1.0}, 300);
    });
});

вы регистрируете обработчик кликов снова и снова, для каждого клика. Просто попробуйте это вместо:

 $('a.images').click(function() {
    $(this).siblings().stop().animate({opacity: 0.4}, 300);
    $(this).stop().animate({opacity: 1.0}, 300);
});