fade in/ fade out is not executed

Question

<script type="text/javascript">

$(document).ready(function () {
    alert("ready");
    $("#comentario").fadeIn(1000);
    $("#nome").fadeIn(2000);
    $("#foto").fadeIn(4000);

    $(".back").click(function () {
        $("#comentario").fadeout(1000);
        $("#nome").fadeout(2000);
        $("#foto").fadeout(4000);
    })


    $(".next").click(function () {
        $("#comentario").fadein(1000);
        $("#nome").fadein(2000);
        $("#foto").fadein(4000);
    })
})


</script>

Well, seeing the code above, I need to know what is wrong, when my document is started, it fades in the 3 ids pointed there (comment, name, photo). However, when the button is pressed from the classes(.next, .back) it does not do what is promised...

curiosity: Alert() is executed only at the beginning of each function, not in the middle, or at the end, example:

$(".next").click(function(){
    alert("vai emitir a mensagem");
    $("#comentario").fadein(1000);
    $("#nome").fadein(2000);
    $("#foto").fadein(4000);
    })
})

but if it is not in the first line of the function, it does nothing..

$(".next").click(function(){
    $("#comentario").fadein(1000);
    alert("não vai emitir a mensagem");
    $("#nome").fadein(2000);
    $("#foto").fadein(4000);
    })
})

I’m using the Jquery library,.. thanks!

Answer 1

Your problem is just lack of attention when typing to the functions fadeIn() and fadeOut().

That’s why your Alert didn’t work. Try firebug for firefox!

$(document).ready(function () {
    console.log( 'document ready');
    $("#comentario").fadeIn(500);
    $("#nome").fadeIn(1000);
    $("#foto").fadeIn(1500);

    $(".out").click(function () {
        console.log( 'fadeOut');
        $("#comentario").fadeOut(500);
        $("#nome").fadeOut(1000);
        $("#foto").fadeOut(1500);
    })


    $(".in").click(function () {
        console.log( 'fadeIn');
        $("#comentario").fadeIn(500);
        $("#nome").fadeIn(1000);
        $("#foto").fadeIn(1500);
    })
})

div{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="" id="comentario" >
    comentario
</div>
<div class="" id="nome" >
    nome
</div>
<div class="" id="foto" >
    foto
</div>
<a class="out" href="#">fadeOut()</a>
<a class="in" href="#">fadeIn()</a>

Answer 2

Apart from the real problem of the question, which @mdma gave account and replied, here is a suggestion to optimize your code.

Instead of repeating on selectors, which consume resources each time they are called and are difficult to maintain (easy to exchange fadeIn for fadein), can do so, using the .fade():

$(document).ready(function () {
    var elementos = $("#comentario, #nome, #foto");
    fadeTo();
    $(".back").click(fadeTo);
    $(".next").click(fadeTo);

    function fadeTo(){
        var toggle = this.classList.contains('next') ? 1 : 0;
        elementos.each(function(i){
            $(this).fadeTo(Math.pow(2, i) * 1000, toggle);
        });
    }
});