jQuery y sIFR. En vuelo estacionario - demora y espectáculo
Pregunta
Estoy tratando de hacer un texto sIFR aparece cuando se pasa de un div, con cierto retraso.
El marcado es así, varias veces:
<div class="box">
<div class="text">
<h6>sIFR Text</h6>
</div>
</div>
Este código está haciendo el truco (de ocultar a sIFR en vuelo estacionario), pero sin demora:
$(document).ready(function() {
$('.text').hide();
$('.box').mouseover(
function() {
$(this).children('.text').show();
//sIFR code :
sIFR.replace(rockwell, {
selector: 'h6',
css: [
'.sIFR-root { color:#FFFFFF; font-size: 1.2em; text-transform: uppercase }',
'a {color: #333333; text-decoration: none;}',
'a:hover {color: #333333;text-decoration:underline;}'
], wmode: "transparent"
}
); //sIFR ends
});
$('.box').mouseout(
function() {
$(this).children('.text').hide();
}
);
});
He intentado utilizar el plugin hoverIntent, cargarlo y usarlo como este, pero no parece funcionar:
$(document).ready(function() {
$('.text').hide();
$('.box').hoverIntent(
function() {
$(this).children('.text').show();
//sIFR code should go here
sIFR.replace(rockwell, {
selector: 'h6',
css: [
'.sIFR-root { color:#FFFFFF; font-size: 1.2em; text-transform: uppercase }',
'a {color: #333333; text-decoration: none;}',
'a:hover {color: #333333;text-decoration:underline;}'
], wmode: "transparent"
}
); //sIFR ends
},
function(){
$(this).children('.text').hide();
}
);
});
Se puede señalar alguna alternativa? Tal vez setTimeout es una buena alternativa, pero Neve usado antes, y no estoy realmente seguro de por dónde debería decirlo.
Gracias por cualquier punta.
Solución
Se puede usar setTimeout.
$(document).ready(function() {
//delcare a variable to hold the timeout
var to;
$('.text').hide();
$('.box').mouseover(
function() {
$(this).children('.text').show();
// do sIFR code after 1000 milliseconds
to = setTimeout(function () { /* sIFR code goes here */ }, 1000);
});
$('.box').mouseout(
function() {
// If mouseout happens before the delay ends
// you probably don't want sIFR code to run.
clearTimeout(to);
$(this).children('.text').hide();
}
);
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow