jQuery слайд, чтобы переключение начала исчезать

Question

Я хочу использовать jQuery для переключения непрозрачности элемента между 0,3 и 1,0 нажатием кнопки.
Проблема, которую я имею, состоит в том, чтобы запустить элемент с непрозрачностью 0,3, а затем при первом щелчке, что делает его полностью видимым с непрозрачностью 1,0. Код, который я пробовал ниже:

$(document).ready(function(){

    //Start faded to 0.3
    $(".fadingElement").fadeTo(0, 0.3);

    //When the trigger is clicked first, fade the relevant item back up to 1.0
    $("div.trigger").toggle(
        function(){ 
            $(this).parent().next().fadeTo('fast', 1.0);
        }, 
        function () {  
            $(this).parent().next().fadeTo('fast', 0.3);
        }
    );
});

При нажатии на «div.trigger» он не исчезает, при повторном нажатии он исчезает еще на 0,3! При щелчке в третий раз, он становится равным 0,3.

Как мне запустить элемент с 0.3 и вернуть его к полностью видимому (1.0) с первого клика? Что здесь происходит?

Answer 1

Проблема (на основе кода в вашей скрипке) состоит в том, что элемент, который вы на самом деле хотите замирать, равен <div class="student_notified">, но ваш код затухает у родительского элемента этого div, а не у самого div.

Вы можете использовать метод find, чтобы выбрать правильный элемент в его родительском элементе:

$(this).parent().next().find(".student_notified").fadeTo('fast', 0.3);

Вот обновленная скрипка .

Answer 2

Вы можете просто использовать .animate() с .css('opacity',value) для достижения этого поведения

Пример:

$("div.trigger").toggle(
$(this).parent().next();
    $(this).parent().next().animate({opacity:1.0});
}, 
function () {  
    $(this).parent().next().animate({opacity:0.3});
   });
}
);