1.  <div class="sideContent" value="right"> <span class="closeIcon" onclick="closeSlide()" aria-hidden="true">&times;</span> <div class="container"> <div id="aboutRow" class="row"> <div class="col-md-6" style="height:100%"> <img id="aboutMeImage" src="Images/JPG/_P7J4523.jpg"> </div> <div class="col-md-6" style="height:100%"> <div id="aboutContent"> <h1> Biography </h1> <p></p> <h1> Stats </h1> <p></p> <p></p> </div> </div> </div> </div> </div>

The parent DIV "sideContent" has display set to none and is shown using the following Jquery:

$(".sideContent").show( "slide", { direction: "right" }, 1000 );

When this function executes and the sideContent DIV slides out, it briefly stops right before the image before continuing the slide out animation. This only happens the first time the DIV is displayed. If the DIV is closed and opened again the animation is smooth. I imagine this due to the browser having to load the image as well as calculate the height/width of the image relative to its parent.

The slide-out animation becomes even choppier when I try and create a gallery of large images within one of the "col-md-6". Unlike above, when using multiple images if you close and reopen the sideContent DIV the slide-out remains choppy, stopping several times before fully sliding out.

Would preloading the images solve this issue? I would like to have a smooth slide out of the DIV without it stopping at every Image.