JQuery UI show/slide not working correctly

Question

The EDIT of all edits: after literally months working on it, the issue seems to be when some/all of the elements inside the current element are floated/absolutely positioned. This seems to interfere with the sliding.

If you have this same problem, I wish you luck in resolving your issue.

Original Post:

Pretty simple really. I have several divs with several elements, and only one of these divs are shown at a time (the rest are hidden).

When the user clicks "Next", the current div should hide by sliding to the left, and the next div should be shown by sliding in from the right (the actual logic is not an issue).

When I tried doing this with .slideUp() and .slideDown() it worked beautifully. However, when trying:

$(oldBox).hide("slide", { direction: "right" }, 1000);

it doesn't work. I have JQuery UI linked to already, so that's not the issue.

Any help would be much appreciated.

EDIT: Link to JSFiddle: http://jsfiddle.net/NFyRW/

EDIT2: It words in JSFiddle; however, I've been unable to get it to work on my actual site. The JS is in a separate file, and is loaded in the header of each page (same header for every single page).

Answer 1

Include the jquery as well as jquery ui js and css files

there is no need for custom js files. then the codes below can be used :

$(this).effect( "slide", "right" ); or $(this).effect('slide', { direction: 'down'}, 500);

Answer 2

General Twyckenham, I had the same issue as that of yours.

I solved the issue by calling custom-min.js file. Try this.

<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>

$(document).ready(function() {
  $("#hide").click(function(){
     $(".target").hide( "slide", 
     { direction: "left"  }, 2000 );
  });
  $("#show").click(function(){
     $(".target").show( "slide", 
     {direction: "right" }, 2000 );
  });

});

This worked for me. I wonder why no one mentioned about the usage of this custom file.

Regards

Answer 3

If your slides are positioned absolutely, animate them using the left property. If they're relative, then switch out the left for margin-left.

Considering your HTML looks similar to this:

<div id="mainContainer">
   <div class="slide"></div>
   <div class="slide"></div>
</div>

#mainContainer {}
.slide {position:absolute;top:0;left:0;}

Something like this should

• fade out the current slide
• push out the current slide to the left
• fade in the new slide
• pull in the new slide from the right

.

var $oldBox=$('#oldBox');
    $oldBox.animate({
       'left':-$oldBox.outerWidth(true),
       'opacity':0
    },{duration:500,queue:false,
    specialEasing:{'left':'linear','opacity':'linear'}});

    $newBox.animate({
        'left':0,
        'opacity':1
    },{duration:500,queue:false,
    specialEasing:{'left':'linear','opacity':'linear'}});