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

Question

I’m trying to make the text appear over time and the image appears a little bit more time apart, to give a more interesting effect. The html and js code I will provide. The problem is that where the images are is 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);
}

Answer 1

If the image is inside the div you want to show, then you have to "hide" the image first. Or do it in HTML with style="display: none;" or in 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: http://jsfiddle.net/rc655/

Hiding in HTML can be done with style="display: none;" in the element tag img and withdraw .hide() of the code above.

Answer 2

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

Another way you can accomplish this procedure in steps is like this:

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

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

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