bumpy slideDown effect

[surreal5335]

I am trying to make an image slideDown just below the jcarousel lite plug in. While it is doing that, it first jumps to the right a little, moves down, then jumps back to the original centered position.

I am wondering how I can get rid of that ugly jump while slidding down. I have tried a number of different tactics to eliminate it figuring it has something to do with getting caught up with it.

I have even tried just aligning the image to bottom to avoid the whole ugly mess altogether... but no matter what method I try to align it to bottom, that doesnt work either. why is aligning images so hard?

here is the link to the site:

http://royalvillicus.com/photo_site/photo.html


Here is the jquery that hanldes showing the jcarousel:


$(document).ready(function(){
$("a#site").click(function(){
$("a#site").fadeOut(250, function() {
$("span.gallery").slideDown(1500);
$("img.btn").fadeIn(1500);
$("span.menu").fadeIn("slow");

});
});


The code for the html:



<!--scrolling thumbnail gallery-->




<span class="gallery" id="gallery" >




<div class="gallery" id="gallery" >
<ul id="gallery" class="gallery" >
<li><img src="/photo_site/thumbs/6.png" alt="1" height="160" width="160" id="6" style="opacity:0.3;filter:alpha(opacity=30)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onclick="showMe('3');"></li>
<li><img src="/photo_site/thumbs/cz.png" alt="2" height="160" width="160" id="cz" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onclick="showMe('7')"></li>


</ul>
</div>
</span>


<a href="#" class="site" id="site">Enter Site</a>




<img src="/photo_site/zoe.png" id="zoe"
style="vertical-align: bottom; opacity:0.8; filter: alpha(opacity=80)"
class="centered" hspace="5">




Thanks a lot for all your help

[harbingerOTV]

it's the "enter site" link causing the issue.move it down in the code and you'll see like:

<img src="photo_files/zoe.png" id="zoe" valign="bottom" class="centered"
style="vertical-align: bottom; opacity:0.8; filter: alpha(opacity=80)">

<a href="#" class="site" id="site">Enter Site</a>

and you can change your class "centered" to this:


.centered {
margin-left: 20px;
}

[surreal5335]

Thanks for the help, but unfortunately neither suggestion worked.

And the Enter site ended up moving down below the zoe picture which is having the issue. how could I go about just aligning it bottom so the ugly jump isnt noticeable?

[TinyScript]

http://i39.tinypic.com/73ia0p.jpg

try this image. I made it as wide as the slides above.

[surreal5335]

well thats certinaly a way around the issue, never thought of that. Thanks a lot!