toggle - Trouble with jQuery animate() on a panel that contains the anythingSlider() -
i'm using jquery anythingslider rotate content. have little tab underneath slider user can click on toggle display of entire slider. i'm using jquery animate() function on div wraps entire slider. when this, disables anythingslider arrows, problem. when remove animate function div wrapper, anythingslider arrows work again. have feeling there's problem putting anythingslider inside div has jquery animate function applied it. can confirm this? if so, what's way can toggle display of anythingslider?
here on jsfiddle can see problem i'm having arrows not working: http://jsfiddle.net/brianmcculloh/h2hpq/3/
html:
<div id="slider-wrapper"> <div id="slider"> <div class="wrapper"> <ul> <li> content... </li> <li> content... </li> <li> content... </li> <li> content... </li> <li> content... </li> <li> content... </li> </ul> </div> <div class="bottom"> </div> </div></div> <div id="slider-tab"> <!-- tab toggles slider panel --> <div onclick="showslider()" id="slider-button"> <a title="toggle panel">toggle</a> </div></div>
javascript:
function showslider() { $('#slider-wrapper').animate({ opacity: 'toggle', height: 'toggle', }, 300, 'linear' ); } $(document).ready(function() { function formattext(index, panel) { return index + ""; } //slider $('#slider').anythingslider({ easing: "easeinoutexpo", // other "linear" or "swing" requires easing plugin autoplay: true, // turns off entire functionaly, not if starts running or not. delay: 3000, // how long between slide transitions in autoplay mode startstopped: false, // if autoplay on, can force start stopped animationtime: 600, // how long slide transition takes hashtags: false, // should links change hashtag in url? buildnavigation: false, // if true, builds , list of anchor links link each slide pauseonhover: true, // if true, , autoplay enabled, show pause on hover starttext: "go", // start text stoptext: "stop", // stop text navigationformatter: formattext // details @ top of file on use (advanced use) }); });
had move this:
<div class="bottom"> </div>
outside of slider div. markup screwing arrow functionality.
Comments
Post a Comment