11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

à l'ouverture d'un site, une animation js à base de :

$(document).ready(function() {
   $('.single-section').hover(function(){
           $(this).toggleClass('hover-in'),
            $(this).toggleClass('hover-off'),
            $('.single-section').toggleClass('hover-off')
       }
    )
    });


A tendance a bugguer en mettant un hover-in fixe sur un bloc... Smiley hum Et ça pose de gros soucis. Ça le fait uniquement à la première ouverture avec caches vidés du navigateur Chromo (dernière version).
J'ai bien d'autres scripts mais je ne vois pas en quoi ça créerait un bug à l'ouverture seulement (ça serait tout le temps).

Voici le site

Merci pour vos retours sur ce petit bug gênant. Smiley smile
Modifié par letty (27 Feb 2018 - 18:17)
Puis-je remonter ? Il y avait une petite erreur textuelle corrigée et je suis toujours bloquée.
Modérateur
Salut,

Je n'ai peut etre pas super bien compris ce que ca devait faire, ou et quand mais je ne vois pas de soucis ni de classe hover-in présentes avant que je fasse un hover...
Le bug est aléatoire... Du coup ça vous l'a sûrement pas fait. En fait, je voudrais savoir si mon code js est bon ou s'il peut être sujet à petit bug.
Modérateur
mmmmmm dans la fonction il faut des points virgules à la fin des lignes et pas des virgules... non ?

 $('.single-section').hover(function(){
           $(this).toggleClass('hover-in');
            $(this).toggleClass('hover-off');
            $('.single-section').toggleClass('hover-off');
}
Non ça ne change rien. Le bug se produit sous chrome lorsqu'on laisse la souris au survol des éléments... Je pense que ça doit créer une sorte de conflit au chargement. Mais comment contourner ça ? Je pensais que mon $(document).ready(function() suffisait à dire de ne pas jouer l'animation avant que tout soit chargé.
Salut,

Et pourquoi tu passes par Javascript pour faire ça au fait ?

Et plus globalement tu devrais optimiser ta manière de faire, sur FF ce n'est pas très fluide.
Je vois pas trop comment faire ça en css... Comment expliquer avec une même classe css que quand un élément est hover, les autres ont un autre comportement ? Si vous avez la réponse je suis très intéressée Smiley smile
letty a écrit :
Je vois pas trop comment faire ça en css... Comment expliquer avec une même classe css que quand un élément est hover, les autres ont un autre comportement ? Si vous avez la réponse je suis très intéressée Smiley smile


Tu te compliques le problème. Il y a juste 2 états, un normal et un au survol. Ça sera beaucoup plus fluide avec la solution proposée par Laurent, avec une bonne courbe de bézier et bim.
Ce n'est pas une usine à gaz d'utiliser des ul li, c'est juste une question de sémantique. Et tu peux le faire avec display:table au lieu de flexbox pour un max de rétro compatibilité.