Delay uitvoeren op removeclass
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$(document).ready(function(){
$(".sub").hover(
function(){ $(this).addClass('arrow') },
function(){ $(this).removeClass('arrow') }
);
});
$(".sub").hover(
function(){ $(this).addClass('arrow') },
function(){ $(this).removeClass('arrow') }
);
});
Met vriendelijke groet,
Mike
Gewijzigd op 09/09/2013 12:11:19 door Mike Koopman
voorbeeld:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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>
<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>
Gewijzigd op 09/09/2013 12:43:07 door Kris Peeters