jQuery在页面加载时不退色

我创建了典型的jQuery滑块（代码来自here）。一切正常，除非我不希望fadeIn()在页面加载时运行（它看起来很奇怪，因为用户还没有点击任何内容）。任何想法如何解决这一问题？基本上我想离开它，除了在页面加载时没有淡入淡出。谢谢！jQuery在页面加载时不退色

// Tab slides 
$(function() { 
    var tabContainers = $('div.slider > div'); 

    $('div.slider ul.slider-nav a').click(function() { 
     tabContainers.hide().filter(this.hash).fadeIn(); 

     $('div.slider ul.slider-nav a').removeClass('selected'); 
     $(this).addClass('selected'); 

     return false; 
    }).filter(':first').click(); 
});

来源

2012-01-03 ansarob

// Tab slides 
$(function() { 
    var tabContainers = $('div.slider > div'), 
     loaded = false; 

    $('div.slider ul.slider-nav a').click(function() { 
     var tab = tabContainers.hide().filter(this.hash); 
     if (loaded){ 
      tab.fadeIn(); 
     }else{ 
      tab.show(); 
     } 
     loaded = true; 

     $('div.slider ul.slider-nav a').removeClass('selected'); 
     $(this).addClass('selected'); 

     return false; 
    }).filter(':first').click(); 
});

说明：脚本加载一个单击处理程序，然后（一旦加载）调用它刚刚创建的点击处理程序。正因为如此，它会消失（因为处理程序正在指示它这样做）。这可以通过添加一个检查（在这种情况下为loaded变量）来避免，基本上可以让第一次点击无需任何干预即可通过，但是可以使将来的调用应用淡入淡出。

来源

2012-01-03 21:12:47

将加载标志放在闭包中而不是放在全局范围内可能会更安全。 – 2012-01-03 21:17:18

@ T.Stone：确实，修复。谢谢。 – 2012-01-03 21:19:22

这可以起作用，除非您单击其中一个导航链接，否则滑块中不显示任何内容。我想我的描述不够，抱歉。我仍然想要显示第一张图片，只是没有'fadeIn（）'@ – ansarob 2012-01-03 21:19:30

您可以在第一次运行后设置一个标志，然后在连续运行时检查它。

// Tab slides 
$(function() { 
    var tabContainers = $('div.slider > div'); 
    var firstRun = true; 

    $('div.slider ul.slider-nav a').click(function() { 
     tabContainers.hide().filter(this.hash); 
     if(!firstRun) { tabContainers.fadeIn(); firstRun = false; } 

     $('div.slider ul.slider-nav a').removeClass('selected'); 
     $(this).addClass('selected'); 

     return false; 
    }).filter(':first').click(); 
});

来源

2012-01-03 21:12:04

这不起作用 – ansarob 2012-01-03 21:20:29

那么你就不能删除

tabContainers.hide().filter(this.hash).fadeIn();

？

来源

2012-01-03 21:12:34 Nicolas78

jQuery在页面加载时不退色

回答

相关问题