Les derniers jours, j'ai essayé de créer une barre latérale avec une animation jQuery, mais quelque chose s'est probablement mal passé et cela semble être un peu cassé et ne pas fonctionner complètement, car la #navigation (div) ne disparaît parfois même pas, cela dépend probablement de l'endroit où je sors ma souris du div car elle ne disparaît que sur certains endroits. Et une autre chose / problème que j'ai trouvé dans le résultat du code est que lorsque vous frappez le coin gauche plusieurs fois à plusieurs reprises, la #navigation continue d'apparaître et de disparaître encore et encore, autant de fois que j'ai atteint le coin. Comment puis-je résoudre ces petits problèmes, mais provoquants?

Voici le code que j'ai écrit aujourd'hui:

<div id="navigation">
    <div id="hidden">
        <h3>Navigation</h3>
        <hr></hr>
        <a href="#">Blog</a>
        <a href="#">Live</a>
        <a href="#">Events</a>
        <a href="#">Genres</a>
        <a href="#">The team</a>
        <a href="#">Changelog</a>

        <div class="userpanel">
            <a href="#">Sign in</a>
            <a href="#">Sign up</a>
        </div>
    </div>
</div>

<script type="text/javascript">
$("#navigation").mouseover(function(){
    $(this).animate({
        width: '300px',
        opacity: '1',
    }, 400);
    $("#hidden").css({
        display: 'block',
    });
});

$("#navigation").mouseleave(function(){
    $(this).animate({
        width: '5px',
        opacity: '0.0',
    }, 400);
    $("#hidden").css({
        display: 'none',
    });
});
</script>

Et bien ... Voici le CSS:

#navigation {width: 5px; height: calc(100vh - 50px); background: #171C21; opacity: 0.0; padding-top: 10px; padding-bottom: 10px;}
#navigation #hidden {width: 90%; margin: auto; height: 100%; display: none; text-align: center;}
#navigation #hidden > h3 {color: #FFFFFF; text-transform: uppercase;}
#navigation #hidden a {width: 200px; color: #FFFFFF; text-decoration: none; display: block; padding-top: 2px; padding-bottom: 2px; text-transform: uppercase; font-size: 14px; margin: auto;}
#navigation #hidden a:hover {color: #8e44ad;}
#navigation .userpanel > a {font-size: 16px; font-weight: 600;}

Et j'utilise cette version de jQuery:

<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>

Aperçu: http://awesomeness.adam.zur.io/ (appuyez sur le côté gauche de l'écran)

1
strangereu 3 janv. 2016 à 15:17

2 réponses

Meilleure réponse

Il semble que vous n'ayez pas l'intention d'arrêter l'animation en cours à l'aide de .stop () car il pépinera lorsque la souris entrera / sortira et le mettra en cache. comme vous devriez changer mousemove en mouseenter, car il ne déclenchera l'événement qu'une seule fois.

$("#navigation").mouseenter(function(){
    $(this).stop().animate({
        width: '300px',
        opacity: '1',
    }, 400);
    $("#hidden").css({
        display: 'block',
    });
});

$("#navigation").mouseleave(function(){
    $(this).stop().animate({
        width: '5px',
        opacity: '0.0',
    }, 400);
    $("#hidden").css({
        display: 'none',
    });
});

code de travail

2
unijad 3 janv. 2016 à 12:28

Essayez d'utiliser ce code (voir cette stylo ) Ajouter une classe {{x0

#navigation {
  width: 300px; 
  height: calc(100vh - 50px); 
  background: #171C21; 
  padding-top: 10px; 
  padding-bottom: 10px;
  transition: all 0.7s ease-in-out;
  transform: translateX(-100%);
  opacity:0
}
#navigation.is-showing{
  transform: translateX(0);
  opacity: 1
}

Js:

$('#navigation').hover(function(){
  $(this).toggleClass('is-showing')
})
1
elreeda 3 janv. 2016 à 12:36