2017-04-10 1 views
-2

J'ai deux questions, car je suis assez nouveau.Existe-t-il un moyen plus simple de simplifier ce code? Aussi quelqu'un peut-il expliquer la virgule?

1) Existe-t-il un moyen de simplifier ce code? Fondamentalement sur le vol stationnaire d'un élément un div apparaît. Je veux reproduire l'effet sur les icônes sociales du site Web http://indicius.com/ lorsque vous passez la souris. Est-ce la bonne façon de créer cet effet?

2) Quelqu'un peut-il m'expliquer la fonction virgule ici? Je veux dire à l'intérieur d'un événement, je vois deux fonctions (qui sont en train de faire le travail que je cherchais) mais je voudrais comprendre ce que signifie la virgule? Je voudrais comprendre ce que signifie la deuxième "position" après une virgule dans un événement.

L'espoir est clair.

$(".social-size-logo").hover(
    function() { 
    $(".color-social-div").css({ 
     "opacity": "1", 
     "z-index": "999" 
    }); 
    }, 
    function() { 
    $(".color-social-div").css({ 
     "opacity": "0", 
     "z-index": "-1" 
    }); 
    }); 
+0

Voir la documentation de [hover()] (https://api.jquery.com/hover/). – showdev

+2

'.hover (handlerIn, handlerOut)' – James

+2

Vous devriez utiliser les sélecteurs CSS ': hover' à la place. – SLaks

Répondre

0

fonction de vol stationnaire de jQuery accepte deux méthodes comme arguments, la première est exécutée sur la souris entre l'élément est sélectionné et la seconde lorsque la souris l'élément à feuilles.

$(element).hover(mouseInHandler, mouseOutHandler); 

Vous pouvez en lire davantage here

Maintenant, venir à l'extrait que vous avez posté, je vais essayer de l'expliquer en ligne

$(".social-size-logo").hover(// Attach the hover event handler 
    function() { // This is the `mouseIn` method 
    $(".color-social-div").css({ //We add the CSS to make the element visible, 
     "opacity": "1", // set the opacity to 1 to make it visible 
     "z-index": "999" // bump up the z-index to bring it to the top 
    }); 
    }, 
    function() {// This is the `mouseOut` method 
    $(".color-social-div").css({ 
     "opacity": "0", 
     "z-index": "-1" 
    }); 
    }); 

Il y a beaucoup d'animations fantaisie et la transition se réunissent pour faire cette animation, mais tout se résume à:

  1. L'utilisateur entre dans la catégorie zone d'icône -> Incendie de l'événement qui apporte l'emballage de la page mise au point et place également au-dessus de tout le reste
  2. Afficher la superposition respective pour l'icône indice: vérifier le comportement sur le vol stationnaire de l'élément div.overlays-wrapper pour comprendre ce
  3. Lorsque l'utilisateur quitte -> réinitialiser tout