html - JQuery UI show/slide not working correctly -
the edit of edits: after literally months working on it, issue seems when some/all of elements inside current element floated/absolutely positioned. seems interfere sliding.
if have same problem, wish luck in resolving issue.
original post:
pretty simple really. have several divs several elements, , 1 of these divs shown @ time (the rest hidden).
when user clicks "next", current div should hide sliding left, , next div should shown sliding in right (the actual logic not issue).
when tried doing .slideup() , .slidedown() worked beautifully. however, when trying:
$(oldbox).hide("slide", { direction: "right" }, 1000);
it doesn't work. have jquery ui linked already, that's not issue.
any appreciated.
edit: link jsfiddle: http://jsfiddle.net/nfyrw/
edit2: words in jsfiddle; however, i've been unable work on actual site. js in separate file, , loaded in header of each page (same header every single page).
if slides positioned absolutely, animate them using left property. if they're relative, switch out left margin-left.
considering html looks similar this:
<div id="maincontainer"> <div class="slide"></div> <div class="slide"></div> </div> #maincontainer {} .slide {position:absolute;top:0;left:0;}
something should
- fade out current slide
- push out current slide left
- fade in new slide
- pull in new slide 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'}});
Comments
Post a Comment