Page jumps when fadeIn() and fadeOut() of two overlapping elements occurs
<p>I've created something in jQuery, I have a problem when clicking the images though. If you scroll down entirely to the bottom of the page and then click, you'll see it jumps. I've tried multiple methods to prevent jumping but its not working.</p>

<p>Here is my code:</p>

<pre><code>$('.author').click(function(e) {
    var name = $(this).attr('id') + '-info';

    $('.author-info article').hide();
    $('#' + name).fadeIn();

    $('.author').removeClass('active');
    $(this).addClass('active');

    e.preventDefault();

});
</code></pre>

<p>here is the live link - <a href="http://sites.lukespoor.com/author/" rel="nofollow">http://sites.lukespoor.com/author/</a></p>

<p>any help is appreciated </p>
