All geek questions in one place

Gradually disappearing in list items using jQuery

I am creating a portfolio page that has a list of various projects (in an unordered list). When loading a page, I want each "li" to disappear one by one. I achieved this like this:

var eT = 0; $('.everything').hide().each(function() { $(this).delay(eT).fadeIn('slow'); eT += 200; });

The problem I am facing is that each li will have a class (or several) based on the type of work (web pages, printing, etc.) that it represents. There is a navigation bar that allows you to filter the type of work displayed. I was faced with the fact that if I click on the filters and the animation is still loading into the elements, everything becomes very dirty.

Here is the work page template: http://jjaakk.miller-interactive.com/templates/work.html

I have tried many things, but with limited success. Any thoughts on how to make this work more stable?

I tried adding .stop () on click, but it did not work as I thought.

+4
source share
4 answers

I think the problem is related to the limitation with jQuery delay (). The following example uses the 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>
+4
source

I know that you said you tried to add .stop () on click. The following code does just that, but works fine for me. If this is not what you are looking for, 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

+3
source

Multiple Index Delay

  var eT = 0; $('.everything').hide().each(function(index) { $(this).delay(eT*index).fadeIn('slow'); eT += 200; });
+2
source

I have used this function several times.

  $('.everything').each(function (i) { var step = $(this); setTimeout(function () { step.slideDown('fast'); }, 300 * i) });
0
source

Source: https://habr.com/ru/post/1347829/

More articles:


All Articles