jQuery Girl
  1. jQuery Girl
  3. JQuery – Fondu à la couleur sur la souris
Intereting Posts
Cacher un groupe de formes avec Flask Jinja2 et WTForms Accéder au code HTML après this.render () dans Iron Router Les éléments déjà sélectionnés de la liste déroulante / combo doivent refléter ce qui a été sélectionné en cliquant sur Label JavaScript réactif – charge / cache une fonction spécifique liée à la largeur du navigateur? Knockout.js – ko.mapping.fromJS – Liaison visible non mise à jour Conflit Jquery-Mootools Basculer la classe active entre les groupes de boutons d’inclusion / exclusion Problème avec ajax retourne la valeur à une fonction jQuery AJAX et VBscript – Impossible d’obtenir des valeurs dans les variables VBscript lors de l’utilisation de POST dans jQuery AJAX En AJAX, dois-je initier le cours? Libellé gras de l’axe X sur le survol de point dans les tableaux à colonnes DataTables 1.10 – Ne pas afficher les résultats Objet jQuery en object JavaScript Quel est le niveau de sécurité des CDN pour la livraison de jQuery? jQuery Ajax – Obtenir du texte interne aux éléments

JQuery – Fondu à la couleur sur la souris

J’ai le code JQuery suivant pour atténuer la couleur d’arrière-plan d’un div en une couleur différente lorsque la souris survole l’élément div. Cela fonctionne très bien mais cela nécessite jqueryui.js. Mes pages utilisent déjà jquery.js à d’autres fins. Je dois donc charger les deux frameworks.

Cela peut-il être fait uniquement avec jquery au lieu de jqueryui? 

 $(document).ready(function(){ $('#page_effect').fadeIn(1000); });  $(document).ready(function(){ $("#frmLogin").hover( function() { $(this).stop().animate({ backgroundColor: "#fff"}, 800); }, function() { $(this).stop().animate({ backgroundColor: "#e6e6e6" }, 800); }); });

Je vous remercie!

Un petit peu hacky, mais c’est le meilleur que j’ai pu trouver …

Exemple de travail: http://jsfiddle.net/Damien_at_SF/paDmg/

Code: 

 
 
 
BLAH BLAH HAHAHAH

Fondu dans le “bg” div (qui est la couleur de fond) lorsque vous survolez le contenu … 

 $(document).ready(function(){ $("#text").hover( function() { $("#bg").stop().fadeOut(); }, function() { $("#bg").stop().fadeIn(); }); });

CSS pour le positionnement: 

 #frmLogin { position:relative; height:400px; width:800px; } #bg{ position:absolute; width:100%; height:100%; border:1px solid black; background:#e6e6e6; } #text { background:transparent; position:absolute; width:100%; height:100%; border:1px solid black; }

jQueryUI est un outil génial, je l’utiliserais certainement sur ma solution …

J’espère que cela pourra aider 🙂

Si vous êtes d’accord avec Jquery UI, une meilleure solution serait simplement ceci 

 $(document).ready(function(){ $("#sample").mouseover(function() { $(this).animate({ backgroundColor:'#f00'},1000); }).mouseout(function() { $(this).animate({ backgroundColor:'#ccc'},1000); }); });

DEMO: http://jsfiddle.net/Starx/KpEMc/1/