Jquery: superpositions transparentes sur hover

essentiellement j'ai 4 images avec divs mis en place comme ceci:Jquery: superpositions transparentes sur hover

<div id="selector"> 
    <div id="1"><div class="folio_container pk"><div class="overlay"></div></div></div> 
    <div id="2"><div class="folio_container ybn"><div class="overlay"></div></div></div> 
    <div id="3"><div class="folio_container u"><div class="overlay"></div></div></div> 
    <div id="4"><div class="folio_container more"><div class="overlay"></div></div></div> 
    <div class="clearfloat"></div> 
    </div>

Et le css:

.folio_container{margin:10px 80px 10px 15px; float:left; position:relative; cursor:pointer; -moz-border-radius: 8px; -webkit-border-radius: 8px; background-position:top left; background-repeat:no-repeat; width:80px; height: 80px;} 
.pk{ background-image:url(../images/pk_icon.png) !important;} 
.ybn{ background-image:url(../images/ybn_icon.png) !important;} 
.u{ background-image:url(../images/u_icon.png) !important;} 
.more{ background-image:url(../images/more_icon.png); margin:10px 0px 10px 15px !important;} 

.overlay{ background-image:url(../images/overlay.png); background-position:top left; -moz-border-radius: 8px; -webkit-border-radius: 8px; background-repeat:no-repeat; width:80px; height:80px; position:absolute; top:0px; left:0px; display:none;}

Comment puis-je obtenir mon Jquery pour qu'il se fane dans la superposition en vol stationnaire de chaque séparé, j'ai toujours été confondu avec cette idée vu que les classes div sont les mêmes, ne vont-elles pas les déclencher toutes en même temps?

Heres le jquery jusqu'ici:

$('.overlay').css('display', 'block'); 
$('.overlay').css('opacity', 0.0); 
$('folio_container', this).hover(function() { 
    $(this).children('.overlay', this).stop().animate({opacity:1.0},500); 
}, 
function() { 
    $(this).children('.overlay', this).stop().animate({opacity:0.0},500); 
});

Source

2009-12-18 Stefan P

Quelques questions de compteur et remarques: - Pourquoi avez-vous besoin d'une div double imbriquée? Vous donnez déjà au parent deux classes, une générale et une spécifique. - votre hover fonctionne sur folio_container, mais cela ne devrait-il pas être .folio_container? – Ferdy

Yeh c'était typo J'ai laissé tomber l'arrêt complet par accident! :) et les divs externes sont pour les onglets que je déclenche en utilisant jquery séparé! –

les coulisses, jQuery itère chacune des divs appariées par le sélecteur et lie les fonctions over et out à chaque élément individuel. En outre, je recommande d'appeler stop avec les deux paramètres optionnels, clearQueue (pour supprimer toutes les animations en attente lorsque vous basculez entre les fonctions) et gotoEnd (pour terminer l'animation en cours) défini sur true - c'est généralement le comportement les gens veulent! (Voir par exemple, this question.)

Source

2009-12-18 15:43:19

Merci qui m'a aidé, j'aime apprendre de nouvelles choses utiles! :) –

Je suis la réponse, je ne réalise Jquery était assez intelligent pour appliquer seulement une action sur les éléments séparés respectivement de la détente avec les mêmes classes! Parfait:

heres la jquery de toute façon!

$('.overlay').css('display', 'block'); 
$('.overlay').css('opacity', 0.0); 
$('.folio_container').hover(function() { 
    $('.overlay', this).stop().animate({opacity:1.0},500); 
}, 
function() { 
    $('.overlay', this).stop().animate({opacity:0.0},500); 
});

Source

2009-12-18 15:36:40

Jquery: superpositions transparentes sur hover

Répondre

Questions connexes