How to give fadeIn () at different times in an img and id

Question

How to give fadeIn () at different times in an img and id

Navigation

#1 by (4 votes)
#2 by (2 votes)

4

I'm trying to make the text appear with a time and the image appears with a slightly longer time difference, to give a more interesting effect. The html code and js I will provide. The problem is that where the images are in the same block as the text. HTML

<div class="span10">
                <div class="colorBody bodyForm">
                    <div id="show" style="display: none;">
                        <section >
                            <article class="textBox letra">
                                <header><h2>BOX banheiro</h2></header>
                                <span></span>
                                <br/>
                                <span></span>

                            </article>
                            <div class="imgRigth">
                                <img src="/img/box/bortovidros-1.jpg"/>
                            </div>
                        </section>
                  </div>
             </div>

JavaScript:

function showBody(){
    $('#show').fadeIn(1000);
}

javascript

asked by anonymous 06.08.2014 / 14:43

2 answers

2

As the friend @Sergio said, you will have to hide the image first.

Another way you can do this in steps is as follows:

 <script>
 $(function(){
    $('.imgRigth').fadeTo(0, 0);
    $('#show').fadeIn(1000, function(){
        $('.imgRigth').fadeTo(1000, 1);
    });
 });
 </script>

In case, as the fadeTo will work on the opacity of the element (and not on visibility), then you can work with the two events separately.

The callback in the second parameter passed in fadeIn is to perform an action after the fadeIn transition has been completed.

06.08.2014 / 17:34

Using hexadecimal as ID in the database How to create a module in npm?

score 4 · Accepted Answer

If the image is inside the div you want to show, then you have to "hide" the image first. Or it does in HTML with style="display: none;" or javascript.

If you hide in javascript the code would be:

function showBody(){
    $('#show img').hide().delay(500).fadeIn(1000); // usei o .delay(500) para atrasar a animação 0.5 segundos
    $('#show').fadeIn(1000);
}

Example: link

Hiding in HTML can do with style="display: none;" in the element tag img and remove .hide() from the code above.