fade in / fade out does not run

Question

fade in / fade out does not run

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

<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 starts, it gives the fadein in the 3 ids pointed there (comment, name, photo). However, when the button is pressed from the classes (.next, .back) it does not make the promised ...

curiosity: alert () runs 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!

javascript jquery

asked by anonymous 15.10.2014 / 06:37

2 answers

2

Aside from the actual question of the question, @mdma answered 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 switch fadeIn to fadein ), you can do so by using . fadeTo () :

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

15.10.2014 / 14:25

How to apply responsiveness to texts? Java program only works on the development machine

score 3 · Accepted Answer

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

That's why your alert did not work. Hope the 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><divclass="" 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>