jQuery slideTo toggle starting faded

I want to use jQuery to toggle the opacity of an element between 0.3 and 1.0 on a button click.

The trouble i am having is starting the element off with an opacity of 0.3 and then on the first click, making it fully visible wit开发者_如何学编程h a 1.0 opacity. The code I have tried is below:

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

When the "div.trigger" is clicked, it does not fade up, when clicked again, it fades a further 0.3! When clicked a third time, it fades to its starting 0.3.

How do i start the element at 0.3, and bring it back up to fully visible (1.0) on the first click? What is going on here?

The problem (based on the code in your fiddle) is that the element you actually want to fade is <div class="student_notified">, but your code is fading the parent of that div rather than the div itself.

You can use the find method to select the correct element within its parent:

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

Here's an updated fiddle.

You could simply use .animate() with .css('opacity',value) to achieve that behavior

Example:

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