jQuery Girl
  1. jQuery Girl
  3. Simple Color FadeIn Hover Jquery avec le site WordPress
Intereting Posts
Un div fixe dans un conteneur Comment centrer verticalement un conteneur div Appel de fonction Javascript avec Thymeleaf Impossible d’obtenir toutes les données XML POST Success Comment aligner verticalement les étiquettes de points sur un graphique à barres Jqplot? json_encode ne fonctionne pas sur les données extraites PDO Activer / désactiver le clavier virtuel Android avec une zone de texte factice Charger des valeurs dans select2 multiselect Jquery change image on click TextBox onchange lors de la définition de la valeur avec javascript (jQuery) jQuery sur clic de bouton ne fonctionne pas obtenir un atsortingbut de données et afficher en mode bootstrap Effet Wobble de la barre de progression Le moyen le plus pratique de faire plusieurs demandes AJAX jQuery création dynamic de champs de saisie en fonction du nombre sélectionné dans un menu déroulant?

Simple Color FadeIn Hover Jquery avec le site WordPress

Je cherche à intégrer l’extrait Jquery suivant (couleur fadeIn on Hover) à mon site Web WordPress situé à l’ adresse http://www.threecell.com/demo . Le code est inclus ci-dessous en fonction de la manière dont je l’ai adapté à la structure de balises de menu actuelle. J’ai chargé le JQuery dans mon fichier functions.php. 

$(document).ready(function(){ //Set the anchor link opacity to 0 and begin hover function $("#menu-sample-menu li a").hover(function(){ //Fade to an opacity of 1 at a speed of 200ms $(this).fadeOut(0).addClass('hover').fadeIn(300); //On mouse-off }, function(){ //Fade to an opacity of 0 at a speed of 100ms $(this).fadeOut(300) .queue(function(){ $(this).removeClass('hover').fadeIn(0).dequeue() }); }); });

Les styles de menu pertinents sont inclus ici: 

 #access { padding:0 20px; background:#111; box-shadow:0 0 7px rgba(0, 0, 0, .1); } #access ul { float:left; padding:0; margin:0; list-style:none; font-weight:600; text-transform:uppercase; } #access li { position:relative; float:left; padding:0; margin:0; } #access ul li:first-child { padding-left:0; } #access a { display:block; padding:15px 24px; color:#f0f0f0; text-decoration:none; } #menu-sample-menu li { color: black; text-shadow: 0px 1px 4px #777; background-color: green; padding: 0 12px 0 12px; } #menu-sample-menu li a.hover { background: orange; } #access li.current_page_item > a, #access li.current-menu-item > a { background: orange; color: white; text-decoration:none; } #access a span { color:#999; font-size:11px; font-style:italic; font-weight:normal; line-height:1.62em; text-transform:none; }

Jusqu’ici, l’état de survol ne s’est pas déclenché. Toute aide ou orientation serait très appréciée.

Meilleures salutations,

T

J’ai créé un jsFiddle ici: http://jsfiddle.net/RV6fE/3/

Cela semble fonctionner correctement. Je devais extraire uniquement le menu HTML de votre site (il a l’air un peu pervers au violon).

En regardant votre site, vous avez une erreur javascript:

Uncaught TypeError: La propriété ‘$’ de l’object [object Objet] n’est pas une fonction

Je ne sais pas exactement ce qui cause ce problème (il semble que jQuery a été chargé avec succès avant le blocage de ce script), mais vous pouvez essayer une chose. Dans le code que vous avez collé ci-dessus, changez ceci: 

 $(document).ready(function(){

pour ça: 

 jQuery(document).ready(function($){

La raison pour laquelle je suggère ceci est qu’il semble qu’il existe un autre bloc jQuery sur votre site (qui, je suppose, est injecté par le thème que vous utilisez), qui définit l’événement document.ready de cette manière.

Le Jquery doit être chargé dans un fichier javascript séparé, en le liant à la tête du code du site (header.php) comme ceci:

ou à l’intérieur balises également dans la tête de la page.

Il est suggéré de ne pas insérer de code javascript dans le fichier functions.php, car il s’agit du cœur des autres fonctions majeures du moteur WordPress et réservé aux structures de code php.