我正在使用 jQuery anySlider 来旋转内容。我在滑块下方有一个小标签,用户可以单击它来切换整个滑块的显示。我在包装整个滑块的 div 上使用 jQuery animate() 函数。当我这样做时,它会禁用anythingSlider 箭头,这是我的问题。当我从 div 包装器中删除 animate 函数时,anythingSlider 箭头再次起作用。我感觉将anythingSlider 放在应用了jQuery animate 函数的div 中存在问题。谁能证实这一点?如果是这样,我可以切换anySlider的显示的另一种方式是什么?
这是在 jsFiddle 上,您可以看到我遇到的箭头不工作的问题: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"> <!-- the tab that toggles the slider panel -->
<div onclick="showslider()" id="slider-button">
<a title="Toggle this 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", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 3000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: false, // Should links change the hashtag in the URL?
buildNavigation: false, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "Go", // Start text
stopText: "Stop", // Stop text
navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
});
});