Hello stackers im pretty sure we can make this code shorter. Any ideas? Much appreciated!
I have UL list with A in it and id like to animate certain parts of text depending on witch one of listings i hover. I maked it work like bellow but this snippet seems oddly inefficient
$( "a#a1" )
.mouseover(function() {
$( "span#span1" ).addClass('animated rubberBand');
})
.mouseout(function() {
$( "span#span1" ).removeClass('animated rubberBand');
});
$( "a#a2" )
.mouseover(function() {
$( "span#span2" ).addClass('animated rubberBand');
})
.mouseout(function() {
$( "span#span2" ).removeClass('animated rubberBand');
});
$( "a#a3" )
.mouseover(function() {
$( "span#span3" ).addClass('animated rubberBand');
})
.mouseout(function() {
$( "span#span3" ).removeClass('animated rubberBand');
});
etc...
HTML:
<ul class="display-posts">
<li class="listing-item"><a class="titledp" id="a1" href="">
<span id="span1" class="fa fa-angle-right arrowkariera"></span>POST1</a></li>
<li class="listing-item"><a class="titledp" id="a2" href=""><span id="span2" class="fa fa-angle-right arrowkariera"></span>POST2</a></li>
<li class="listing-item"><a class="titledp" id="a3" href=""><span id="span3" class="fa fa-angle-right arrowkariera"></span>POST3</a></li>
<li class="listing-item"><a class="titledp" id="a4" href=""><span id="span4" class="fa fa-angle-right arrowkariera"></span>POST4</a></li>
<li class="listing-item"><a class="titledp" id="a5" href=""><span id="span5" class="fa fa-angle-right arrowkariera"></span>POST5</a></li>
<li class="listing-item"><a class="titledp" id="a6" href=""><span id="span6" class="fa fa-angle-right arrowkariera"></span>POST6</a></li>
<li class="listing-item"><a class="titledp" id="a7" href=""><span id="span7" class="fa fa-angle-right arrowkariera"></span>POST7</a></li>
</ul>
As you can see i need to carry on the number of A to the SPAN selector becouse i want only this specific SPAN to be animated no all of them
