jquery - How do I add a class to a span after a delay? -
i trying add class span after delay 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
your jquery correct. problem may div
not valid child of span
, , therefore may not inherit properties of active
class (depending on browser implementation).
change 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>
Comments
Post a Comment