Je veux fondre un div dans avec jQuery lorsque l’utilisateur survole un div parent.
J’ai le code suivant:
HTML:
Explore D&D Creative ... THIS IS SOME TWITTER TEXT
@DandDCreative - SOME TIME AGO
- Synchronisation à défilement vertical pour 2 divs
- Comment append% symbol dans type d’entrée = texte sur entrée utilisateur?
- Comment puis-je supprimer une couleur d’arrière-plan d’une table Twitter Bootstrap?
- Le défilement d’un div enfant ne doit pas faire défiler parent div
- Filtrage des menus déroulants à l’aide de jQuery
CSS:
/*============================================ CONTENT ============================================*/ #content { min-height:100%; margin-top:55px; padding-top:10px; } /*============================================ HOME.PHP ============================================*/ #home #content #top-slide { background-color:#3D3B37; height:300px; position:relative; } #home #content #top-slide #select { height:48px; width:100%; position:absolute; bottom:0; background:url(../img/home/bg-slie-select.png) repeat; display:none; } #home #content #twitter-main { background-color:#cccccc; height:200px; margin:10px 0; padding-top:30px; text-align:center; } #home #content #twitter-main i.icon-twitter { background:url(../img/common/social/twitter.png) no-repeat center; width:37px; height:37px; margin:0px auto 20px auto; display:block; } #home #content #twitter-main span.divider { border-top:1px solid #535353; height:0; width:100px; display:block; margin:0 auto; } #home #content #twitter-main h2.feed { margin:40px 0; } #home #content #twitter-main p.info { font-size:10px; color:#666666; }
et JS:
$(document).ready(function() { //HOME.PHP $('#top-slide').mouseover(function() { ('#select').fadeIn(600); }); $('#top-slide').mouseout(function() { ('#select').fadeOut(600); }); });
Ce code appelle les erreurs suivantes avec les souris suivantes:
Uncaught TypeError: Object #select has no method 'fadeIn'
Uncaught TypeError: Object #select has no method 'fadeOut'
Je pensais que cela pouvait avoir quelque chose à voir avec les méthodes mouseover / mouseout, mais je l’ai essayé avec la méthode clic aussi, mais c’est pareil.
J’ai probablement fait quelque chose de stupide mais je ne trouve pas le problème.
Voici un JSFIDDLE pour tout le monde: http://jsfiddle.net/Ze28y/1/
Vous avez manqué le $ dans les gestionnaires.
$('#top-slide').bind("mouseenter", function() { $('#select').stop(true).fadeIn(600); //$('#select'), not ('#select') }); $('#top-slide').bind("mouseleave", function() { $('#select').stop(true).fadeOut(600); //$('#select'), not ('#select') });
En outre, vous devez d’abord append un stop avant vos fondus pour éviter que plusieurs fondus en fondu ne soient mis en queue . Et, étant donné que #select est un enfant de #top-slide , vous devez utiliser les événements mouseenter et mouseleave au lieu de mouseover et mouseout . (lié à cela )
utiliser $
$('#top-slide').mouseover(function() { $('#select').fadeIn(600); }); $('#top-slide').mouseout(function() { $('#select').fadeOut(600); });
Vous avez oublié le $ pour déclarer un object jQuery
essayez ceci, vous avez manqué $
$('#top-slide').mouseover(function() { $('#select').fadeIn(600); }); $('#top-slide').mouseout(function() { $('#select').fadeOut(600); });
Manquer $ et vous feriez mieux d’utiliser le vol stationnaire.
$('#top-slide').hover( function() { $('#select').fadeIn(600); }, function() { $('#select').fadeOut(600); } );