带内容加载器的Jquery Slider

时间:2011-03-26 23:32:16

标签: jquery

嗨,大家好 我是JQuery的新手我只是想知道是否有人可以帮助我解决这个问题我几乎达到了我想要的水平。 看看这里:

http://jsfiddle.net/meyson/EsfXD/

所以我有不同标签的滑块。一旦用户点击滑块,它就会移动并交换标签。在每个选项卡中都有gif加载器,它有点模仿加载数据(我知道它很奇怪,但这就是我需要做的)。该加载器仅在页面首次加载时才起作用,但是每次加载新选项卡时我都需要执行该加载器。因此,当我从第一个选项卡移动到第二个选项卡时,我希望执行加载功能,当我移回选项卡时,我希望再次执行该功能。我希望这是有道理的。

非常感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

你应该调用setTimeout(revealContent,7250);在select函数中(在每张幻灯片上调用)。此外,您现在隐藏并显示所有加载器,但您只想隐藏并显示所单击页面上的加载器。

好的,尝试这个在每个标签交换机上显示2s的加载器...如果你还想先隐藏内容,你应该试着弄清楚它自己。

$(function() {
 $("#tabs").tabs({
     select: function(event, ui) {
         $("#slider").slider("value", ui.index);
         revealContent(ui.index+1);             
     }
 });
 $("#slider").slider({
     min: 0,
     max: $("#tabs").tabs("length") - 1,
     slide: function(event, ui) {
         $("#tabs").tabs("select", ui.value);
         $(this).slide(); // fixes the animation
     },
     animate: true
 });


});


 jQuery(function() {
     revealContent(1);
 });

 function revealContent(id) {
     jQuery('#tabs-'+id+' .loadingGifs').show();
     setTimeout(function(){
         jQuery('#tabs-'+id+' .loadingGifs').hide();    
     }, 2000);     
 }