與fadeIn和fadeOut jQuery的問題

我試圖創建一種方式來顯示和隱藏divs內的內容（基於類），當用戶點擊具有特定ID的錨鏈接。與fadeIn和fadeOut jQuery的問題

我有一個帶有錨鏈接的字母A-Z索引。當有人點擊一個特定的鏈接（字母）JavaScript隱藏（fadeOut）與列出的特定類的所有div。然後腳本顯示（fadeIn）我後面的div。

問題是這裏有13個，我已經分享了下面的第一個3來幫助給出上下文。

發生什麼是一些奇怪的時間和延遲問題時，在字母之間來回點擊。有時候div顯示會持續很長時間，並且不會淡出，即使我的時間設置很短。

我確信有一個更聰明的方法可能會在這個或許幾個功能，但我不知道如何做到這一點。

讓我知道你是否有任何問題，或需要更多的細節和上下文。

$('#letter-a').mousedown(function(){  
    $('.letter-b, .letter-c, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').fadeOut(100, function(){ 
     $('.letter-a').delay(600).fadeIn(500); 
    }); 
}); 

$('#letter-b').mousedown(function(){  
    $('.letter-a, .letter-c, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').fadeOut(100, function(){ 
     $('.letter-b').delay(600).fadeIn(500); 
    }); 
}); 

$('#letter-c').mousedown(function(){  
    $('.letter-a, .letter-b, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').fadeOut(100, function(){ 
     $('.letter-c').delay(600).fadeIn(500); 
    }); 
});

來源

2013-11-15 Berchman

嗨，如果我的問題得到了解決，您想製作一部手風琴，這意味着：您只需要在同一時間顯示一個div。 Acutally不是很難做到，但我總是使用插件，因爲我確信我沒有錯誤。嘗試其中之一http://www.1stwebdesigner.com/freebies/jquery-accordion-menus-tutorials/ – stefanz

試試你的代碼的.stop(true,true)

縮小版

var cls_all = $('[class*="letter-"]'); //cached 
$('[id^="letter-"]').mousedown(function() { 
    var cls = this.id; 
    cls_all.not('.' + cls).stop(true, true).fadeOut(100, function() { 
     $('.' + cls).delay(600).stop(true, true).fadeIn(500); 
    }); 
});

^ attribute-starts-with-selector

* attribute-contains-selector/

來源

2013-11-15 01:48:57

@PSL我以爲做同樣的事情，但是'this'是指'id^=「letter-'和OP想要他們是不同的，我想。 –

是的，我後來意識到..快速看了這個想法... :)可能你可以緩存'$（'[class * =「letter - 」]'）'外面，並使用它作爲 – PSL

我非常感謝Tushar提供的這個解決方案，我已經將84條代碼凝聚成了7個純粹的天才 - 我非常感謝！:-) – Berchman

當在字母之間來回點擊時發生了一些奇怪的時間和延遲問題。

嘗試使用stop（）方法（http://api.jquery.com/stop/）：

$('.letter-b, .letter-c, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').stop().fadeOut(100, function(){ 
     $('.letter-a').delay(600).fadeIn(500); 
    });

如果它不會幫助 - 嘗試用setTimeout的更換延遲（）

來源

2013-11-15 01:52:39

試試這個

$('#letter-a').mousedown(function() { 
    $('.letter-b, .letter-c, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').fadeOut(100, function() { 
     setTimeout(function() { 
      $('.letter-a').fadeIn(500);, 600); 
     }); 
    }); 

$('#letter-b').mousedown(function() { 
    $('.letter-a, .letter-c, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').fadeOut(100, function() { 
     setTimeout(function() { 
      $('.letter-b').fadeIn(500);, 600); 
     }); 
    }); 

$('#letter-c').mousedown(function() { 
    $('.letter-a, .letter-b, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').fadeOut(100, function() { 
     $('.letter-c').fadeIn(500);, 600); 
    }); 
});

來源

2013-11-15 01:53:34

與fadeIn和fadeOut jQuery的問題

回答

相關問題