jquery transitional problem

[ll87]

hey guys, i am working on a site for my friend, and the slideUp/down and fade ins and outs arent working properly, they are a bit jumpy.

 

when a section slides down, it keeps sliding then when finished the bottom jumps up to where it should be. it's the same when i try fading. is it somethng to do with their containers? i haven't got fixed heights so i didn't think so.

 

www.matthewmortimer.co.uk/photography.html is the address.

 

jquery:

$(document).ready(function(){
   var h3;
   $("div.image_set").css("display","none");
   if($("h3.trigger").length > 0){
       $("h3.trigger").click(function(){
           if($(this).hasClass("open")){
               $(this).removeClass("open");
               $(this).next().stop().slideDown(4000);
               $(".close").next().fadeOut(1000);
               $(this).addClass("close");
           }
           else{
               $(this).removeClass("close");
               $(this).addClass("open");
               $(this).next().stop().fadeOut(1000);
           }
       })
       $("h3.trigger").hover(function(){
           $(this).css("cursor","pointer");
           h3 = $(this).html();
           $(this).html(h3+" (click to view/hide images)");

       },
       function(){
           $(this).html(h3);
       });
   }
});

 

thanks in advance

Edited January 19, 2010 by ll87

[BeeDev]

Easiest fix was to add following statement to ur CSS (Tested on Firefox ONLY!):

 

.big_image {

float:left

}

 

Basically, the div.big_image needs to be floated or the script thinks it's underneath the thumbnails and keeps expanding ... i think

[ll87]

thank you BeeDev, works in Chrome for OS X too.

 

also, i notice when the div slides down, they shift to the left slightly, and when they are hidden they go back to the right.