Web Analytics Made Easy -
StatCounter Change class of li elements and loop - CodingForum

Announcement

Collapse
No announcement yet.

Change class of li elements and loop

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Change class of li elements and loop

    Good afternoon everyone!

    So, I'm having a bit of trouble with a script. I have the basic idea, but cannot translate it into code. Here's what it's supposed to accomplish:

    I have he following code:

    Code:
    <ul class="display" id="imagens-home">
        <li class="invisivel"><img src="img/teste/lanche-1.jpg" /></li>
        <li class="invisivel"><img src="img/teste/lanche-2.jpg" /></li>
        <li class="invisivel"><img src="img/teste/lanche-3.jpg" /></li>
        <li class="invisivel"><img src="img/teste/lanche-4.jpg" /></li>
        <li class="invisivel"><img src="img/teste/lanche-5.jpg" /></li>
        <li class="invisivel"><img src="img/teste/lanche-6.jpg" /></li>
    </ul>
    I'm also using Animate.css:
    https://github.com/daneden/animate.css

    Animate.css works by assigning different classes, being .animated and others, like .fadeIn or .zoomOut to the elements that should be animated.

    Code:
    <div class="animated fadeInLeft"></div>
    I want to make a script that will:

    1- Remove the .invisivel (display:none) class from an item;
    2- Add the .fadeInLeft class to it;
    3- Stay visible for about three seconds;
    4- Replace .fadeInLeft with .zoomOut;
    5- Make the element hidden again;
    6- Repeat for next item on the list;

    I have found examples of code that can execute these functions separately, but I can't find a way to join them into one code or to make them work together.

    Thanks in advance for any help. I'm quite new to .js programming, and any advice would be appreciated.

  • #2
    Sounds like you are going about at least some of this backwards. I'd start by getting rid of the unnecessary classes on the <li> tags - you can identify all of those from the id on the <ul> tag and add classes individually if needed.

    Also if you want help with JavaScript then you need to post the code you already have so we can help you fix it (as no one here will write it for you).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

    Comment


    • #3
      So, I managed to find a way to enable the FadeIn animation, then after it ends, enable FadeOut and make the div invisible again.

      HTML
      Code:
      <ul class="display" id="imagens-home">
                        <li class="invisivel"><img src="img/teste/lanche-1.jpg" /></li>
                        <li class="invisivel"><img src="img/teste/lanche-2.jpg" /></li>
                        <li class="invisivel"><img src="img/teste/lanche-3.jpg" /></li>
                        <li class="invisivel"><img src="img/teste/lanche-4.jpg" /></li>
                      </ul>
      JS
      Code:
      $(document).ready(function() {
        var animationIn = 'animated fadeInLeft';
        var animationOut = 'animated zoomOut';
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
      
        $('#imagens-home>li').each(function(){
        $(this).removeClass('invisivel').addClass(animationIn).on(animationEnd, function(){
          $(this).removeClass(animationIn).addClass(animationOut).on(animationEnd, function(){
            $(this).removeClass(animationOut).addClass('invisivel')
            });
          });
        });
      });
      My current problem is how to execute the function again in the next item in the <ul>. I thought using .each() would do it, but it just toggles all of them at once.
      Which function would be adequate for this to happen?

      Comment

      Working...
      X