Delay uitvoeren op removeclass

Door Mike Koopman op 09-09-2013 12:10 gewijzigd op 09-09-2013 12:11

1.307 views

Ik heb een delay nodig voor in de menu structuur. Ik heb al op diverse forums gekeken wat de mogelijke oplossing is. Zou iemand mijn kunnen helpen? De bedoeling is dat er alleen een delay komt op de removeclass.

$(document).ready(function(){
  $(".sub").hover(
	function(){ $(this).addClass('arrow') },
	function(){	$(this).removeClass('arrow') }
   );
});

Met vriendelijke groet,

Mike

Kris Peeters

09-09-2013 12:31 gewijzigd op 09-09-2013 12:43

Een delay in javascript, doe je met setTimeout.

voorbeeld:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
  var delay = 400;  // in milliseconden
  $(".sub").hover(
    function() {
      $(this).addClass('arrow') 
    },
    function() {
      var self = $(this);  // altijd opletten met "this".  binnen een andere functie is this iets anders.  Dus we slaan this op in een veriabele, die wel beschikbaar zal zijn
      setTimeout(function() {
          self.removeClass('arrow') 
        },
        delay
      );
    }
   );
});
</script>
<style>
  .sub {
    cursor: pointer;
    width: 150px;
    height: 150px;
    float: left;
  }
  .arrow {
    background-color: red;
  }
</style>
<ul>
  <li class="sub">Freddy</li>
  <li class="sub">Tom</li>
  <li class="sub">Jan</li>
  <li class="sub">Cindy</li>
</ul>

Reageren

Inloggen om te reageren