jQuery选项卡动画暂停和控制器播放

时间:2012-04-23 11:02:46

标签: javascript jquery css animation tabs

我使用了jQuery选项卡用于carousal,但我需要控制按钮,如Play和Pause。以下是我的控件。

<p id="carusalSwitch">Autoplay 
  <span class="on">On</span> | <span class="off">Off</span>
</p>

然后页面暂停,标签动画暂停(停止),通过按钮交互,它可以播放,反之亦然。以下是查询代码

// when loaded carousal is paused, off text is change to bold
$('#carusalSwitch .off').css('fontWeight','bold');

// when user click on "ON" link
$('#carusalSwitch .on').click(function() {
$('#featured > ul').tabs({fx:{opacity: 'toggle'}}).tabs('rotate', 3000, true);
    $(this).css('fontWeight','bold');
$('#carusalSwitch .off').css('fontWeight','normal');
});

// when user click on "OFF" link        
$('#carusalSwitch .off').click(function() {
$('#featured > ul').tabs();
     $(this).css('fontWeight','bold');
$('#carusalSwitch .on').css('fontWeight','normal');
}); 

单击“开启”链接时,动画开始,但点击“关闭”时,动画仍然继续。 可能是什么错误?

即使我尝试添加以下代码,

$('#featured > ul').tabs().clearQueue().stop();

但没有运气。

2 个答案:

答案 0 :(得分:0)

试试这个:

$('#featured > ul').unbind('toggle').unbind('rotate');

答案 1 :(得分:0)

$('#featured > ul').tabs('rotate', null, true);

当我按上述方式使用时,它可以正常工作。