Menu
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 each 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.
564
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
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
