Jquery Timer Fonction de diapositive

Question

À l'heure actuelle, j'ai un div qui glisse de droite à gauche, puis vice versa à son emplacement d'origine. Mais globalement ce n'est pas vraiment comme ça que je veux que ça fonctionne. Mon objectif principal: est pour l'utilisateur de planer au-dessus de la div principale qui va ensuite sortir le div coulissant. La partie qui devient difficile est la suivante: Si l'utilisateur oublie de faire glisser la plongée en arrière, je veux lui donner le temps qui le fera se fermer automatiquement après un certain temps s'est écoulé. Voici mon code de travail jusqu'à présent: jsfiddle.net/eMsQr/14/.

Ma fonction javascript:

$(document).ready(function() { 
    $("#arrow").hover(
    function(){ 
     $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500); 
    }, 
    function(){} 
); 
}); 


$("#arrow").click(function(e){ 
    $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500); 
}); 

Answer 1

Voici un jsFiddle example qui fixe un délai de 3 secondes via le setTimeout fonction .:

jQuery

var cto; 
$("#arrow").hover(
function() { 
    clearTimeout(cto); 
    $("#inner").stop().animate({ 
     marginRight: "0px", 
     opacity: "1px", 
     height: "100px" 
    }, 500); 
}, function() { 
    cto = setTimeout(function(){$('#arrow').trigger('click')}, 3000); 
}); 


$("#arrow").click(function(e) { 
    $("#inner").stop().animate({ 
     marginRight: "-100px", 
     opacity: "1px", 
     height: "100px" 
    }, 500); 
});​ 

Notez que si l'utilisateur déplace sa souris et la renvoie à la div, la boîte reste ouverte jusqu'à ce qu'ils quittent à quel point le compte à rebours de 3 secondes commence.

Answer 2

Vous devez vous assurer que vous utilisez la deuxième méthode function() dans hover jQuery. Pour le moment, vous ne faites qu'animer votre div coulissant lorsque l'utilisateur survole la div principale. Vous voulez aussi animer sur le vol stationnaire sur.

Voici la mise à jour jsFiddle.

Answer 3

Dans la fonction de vol stationnaire, vous pouvez ajouter une ligne supplémentaire pour déclencher l'événement de clic en utilisant la ligne ci-dessous:

setTimeout(function() { $("#arrow").trigger('click'); }, 5000); 

le 5000 est le nombre de millisecondes à attendre avant de déclencher le clic.

Answer 4

voir le violon ici: http://jsfiddle.net/eMsQr/51/

il utilise le mouseleave jquery et aussi delay. Changez la valeur dans le délai pour obtenir l'heure que vous voulez.

$("#arrow").mouseleave(function(){ 
    $("#inner").stop().delay(500).animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500); 
}); 

Answer 5

Vous devez utiliser setTimeout() pour définir le délai de fermeture de la div. Vous devez également utiliser clearTimeout() dans la fonction d'ouverture pour l'arrêter la fermeture automatique si quelqu'un mousesout, puis de nouveau encore:

var timeout; 
$("#arrow").hover(
    function() { 
     clearTimeout(timeout); // clear the timer which will close the div, as we now want it open 
     $("#inner").stop().animate({ 
      marginRight: "0px", 
      opacity: "1px", 
      height: "100px" 
     }, 500); 
    }, function() { 
     timeout = setTimeout(function() { 
      $("#inner").stop().animate({ 
       marginRight: "-100px", 
       opacity: "1px", 
       height: "100px" 
      }, 500);     
     }, 1000); // close the open div 1 second after mouseout. 
    } 
); 

Example fiddle

Answer 6

Essayez ceci: http://jsfiddle.net/vansimke/cJ5pf/

I accroché dans l'événement mouseleave et a ajouté un setTimeout. Vous devrez peut-être attraper le délai d'attente si vous devez l'annuler plus tard (c'est-à-dire qu'ils rentrent dans la flèche)