0

我有一个小旋转木马,我在它上面放了一个覆盖层。我想每次都在这个叠加层中显示文本,移动功能已经结束。当它自动切换时,覆盖层每次都显示正确但是当我在幻灯片底部的寻呼机号码之间切换得太快时,有时覆盖层太迟淡入淡出。

----->这是我对下面代码的小提琴(http://jsfiddle.net/5xMNx/)<--

$('#slider-code').tinycarousel({ 
pager: true,
interval: true, 
duration: 1500,
intervaltime: 10000,
callback: function(element, index){
    $( ".textbox" ).each(function( index ) {
        $( this ).hide();
    });

    var value = $('ul li').eq(index).attr('tag');
    console.log(value);
         $('#'+value).fadeIn("slow").delay(7500);
        $('#'+value).fadeOut("slow");
    }

});

});

有谁知道我怎样才能使它正确?非常感谢您!!!

4

1 回答 1

1

我更新了你的代码,我不确定你真正想要什么,所以问我是否有问题。

这是演示:演示

我改变了什么:

我使用了 javascriptsetTimeout方法而不是.delay(). 这将允许您使用以下方法重置超时clearTimeoutJavaScript Timing Events

像那样 :

timeout = setTimeout(function(){ //init the timer
              $('#'+value).fadeOut("slow"); 
          },7500);

您可以在需要时重置它:

clearTimeout(timeout); //reset the timer

请参阅 JQuery 的.delay()文档:

.delay() 方法最适合在排队的 jQuery 效果之间进行延迟。因为它是有限的——例如,它不提供取消延迟的方法——.delay() 不能替代 JavaScript 的原生 setTimeout 函数,这可能更适合某些用例。

我还使用了 JQuery.stop方法(此处的文档)在启动新动画之前停止当前正在运行的动画,如果您在不同的滑块页面上单击非常快,它可能仍在运行。

我这样使用它:

$('#'+value).stop().fadeIn("slow"); 

希望我对你有帮助!

于 2013-10-09T07:25:04.210 回答