fade in list items sequentially with jQuery
I'm building a portfolio page that has a list of different projects (in an unordered list). On page load I want to have each "li" to fade in, one after another. I have achieved this like so:
var eT = 0;
$('.everything').hide().each(function() {
$(this).delay(eT).fadeIn('slow');
eT += 200;
});
The problem I am having is that e开发者_C百科ach li will have a class (or multiple) based on the type of work (web, print, etc) it represents. There is a navigation to the side that will allow you to filter the type of work to display. What I have encountered is that if I click the filters, while the animation is still loading in items, things get really messy.
Here is the template of the work page currently: http://jjaakk.miller-interactive.com/templates/work.html
I have been trying many things, but with limited success. Any thoughts on how to make this work in a more stable manner?
I tried adding .stop() on click, but it has not worked as I intended.
I think the problem was related to a limitation with jQuery delay(). The following uses standard javascript setTimeout and clearTimeout as suggested by the jQuery delay() api.
<html>
<head>
<script src="./jquery-ui-1.8.7.custom/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var timeOuts = new Array();
var eT=200;
function myFadeIn(jqObj) {
jqObj.fadeIn('slow');
}
function clearAllTimeouts() {
for (key in timeOuts) {
clearTimeout(timeOuts[key]);
}
}
$('.everything').hide().each(function(index) {
timeOuts[index] = setTimeout(myFadeIn, index*eT, $(this));
});
$('#something').click(function() {
clearAllTimeouts();
$('.everything').stop(true,true).hide();
$('.something').each(function(index) {
timeOuts[index] = setTimeout(myFadeIn, index*eT, $(this));
});
});
});
</script>
<style type="text/css">
li.everything {width:40px;height:40px;background:#bbb;display:inline-block}
li.something {width:80px;height:80px;background:#000;display:inline-block}
</style>
</head>
<body>
<button id="something">BLACK</button>
<ul>
<li class="everything"></li>
<li class="everything something"></li>
<li class="everything"></li>
<li class="everything something"></li>
<li class="everything"></li>
<li class="everything something"></li>
<li class="everything"></li>
<li class="everything something"></li>
<li class="everything"></li>
<li class="everything something"></li>
</ul>
</body>
</html>
I know that you said you tried adding the .stop() on click. The following code does exactly that, but works fine for me. If this is not what you are looking for, please explain in the comments.
<html>
<head>
<script src="/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var eT=0;
$('.everything').hide().each(function() {
$(this).delay(eT).fadeIn('slow');
eT += 200;
});
$('.everything').click(function() {
$('.everything').stop(true,true).fadeIn();
});
});
</script>
<style type="text/css">
li.everything {width:40px;height:40px;background:#bbb;display:inline-block}
</style>
</head>
<body>
<ul>
<li class="everything"></li>
<li class="everything"></li>
<li class="everything"></li>
<li class="everything"></li>
<li class="everything"></li>
</ul>
</body>
</html>
Working Demo
Multiple delay by index
var eT = 0;
$('.everything').hide().each(function(index) {
$(this).delay(eT*index).fadeIn('slow');
eT += 200;
});
加载中,请稍侯......
精彩评论