Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts

    bumpy slideDown effect

    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:

    Code:
     $(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:

    Code:
     <!--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

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    it's the "enter site" link causing the issue.move it down in the code and you'll see like:

    Code:
    <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:


    Code:
    .centered   {
    margin-left: 20px;
    }
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    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?

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts


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

  • Users who have thanked TinyScript for this post:

    surreal5335 (03-12-2009)

  • #5
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    well thats certinaly a way around the issue, never thought of that. Thanks a lot!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •