How do I add a class to a span after a delay?

Question

I am trying add a class to a span after a delay but nothing happens. Jquery:

$(".arrow-left").delay(1000).queue(function() {
       $(this).addClass("active")
});
$(".arrow-right").delay(1000).queue(function() {
        $(this).addClass("active")
});

Html:

<nav>
     <span class="arrow-left">
         <div class="arrow-l">
              <img alt="" src="images/prev-arrow.svg">
         </div>
     </span>
     <span class="arrow-right">
         <div class="arrow-r">
            <img alt="" src="images/next-arrow.svg">
         </div>
      </span>
</nav>

Thanks

http://stackoverflow.com/questions/17878478/add-a-class-using-jquery-after-a-delay — AmmarCSE, May 31 '15 at 20:52
AmmarCSE that answer is not related to adding a class to a span? — MrThunder, May 31 '15 at 20:55

Rick Hitchcock · Accepted Answer · 2015-05-31T21:03:03.367

Your jQuery is correct. The problem may be that a div is not a valid child of a span, and therefore it may not inherit the properties of the active class (depending on browser implementation).

Change to this:

<nav>
  <div class="arrow-left">
     <div class="arrow-l">
          <img alt="" src="images/prev-arrow.svg">
     </div>
  </div>
  <div class="arrow-right">
     <div class="arrow-r">
        <img alt="" src="images/next-arrow.svg">
     </div>
  </div>
</nav>

$(".arrow-left").delay(1000).queue(function() {
  $(this).addClass("active")
});

$(".arrow-right").delay(1000).queue(function() {
  $(this).addClass("active")
});

.arrow-left, .arrow-right {
  display: inline-block;
}

.active {
  zoom: 1.2;
  border: 5px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div class="arrow-left">
    <div class="arrow-l">
      <img alt="" src="http://placehold.it/100x100">
    </div>
  </div>
  <div class="arrow-right">
    <div class="arrow-r">
      <img alt="" src="http://placehold.it/100x100">
    </div>
  </div>
</nav>

Thanks Rick Hitchcock, but I do not wish to change the span to a div because It is part of a jquery plugin and will not function correctly if changed. Is there any jquery way around it? Or will I just add some extra divs? — MrThunder, May 31 '15 at 21:04
Even though your code has invalid HTML, I'm surprised it doesn't work as-is. Could you post a fiddle or link where it fails? — Rick Hitchcock, May 31 '15 at 21:09
I just added a div before the span and it worked fine. Thanks for the help Rick. — MrThunder, May 31 '15 at 23:13

How do I add a class to a span after a delay?

1 Answers1