Je suis nouveau sur le site et besoin d'aide! J'ai besoin de boutons qui, une fois retournés, révèlent une table (j'ai terminé) et changent leur propre image en un onglet (ce qu'ils font), mais conservent cette image de survol jusqu'à ce que la souris quitte le bouton ou sa table respective (c'est le problème). Fondamentalement, il est assez facile de l'obtenir pour changer les images, et pour que les tables se dilatent et disparaissent correctement, mais je ne peux pas obtenir les boutons pour retourner à leur image originale quand on s'éloigne d'eux ou à la table appartenir à. J'ai une ligne de code qui les fait se comporter comme un roulement normal, mais ce n'est pas bon parce que la table ci-dessous n'est pas imbriquée dans le même objet et donc l'image revient quand je veux qu'elle reste sur elle. Je suis conscient que le fait que mes boutons et leurs tables ne soient pas imbriqués complique les choses, parce que je ne peux pas traverser avec des enfants ou des ancêtres, mais j'espère qu'il y a un moyen de contourner cela.Rollovers sur des objets non-decendent dans jQuery
Ci-dessous est mon code d'exemple, ce qui est assez visqueux pour ce que j'essaie de faire depuis la personne pour laquelle je travaille voulait beaucoup d'animation séquentielle de différentes parties.
Voici le code HTML:
<div id="topNavBar">
<a href="#" class="topButton" id="how">
<img src="images/howBut.jpg" alt="How" name="How" width="140" height="44" border="0" />
</a>
<a href="#" class="topButton" id="who">
<img src="images/whoBut.jpg" alt="Who" name="Who" width="140" height="44" border="0" />
</a>
</div><!--end of topNavBar-->
</div><!--end of pageHeader, part of earlier code-->
<div id="subMenus"><!--serves as a 150px spacer to give room for expanding tables-->
<div class="subMenuBackground" id="how">
<table class="subMenuOptions" border="0" cellpadding="0" cellspacing="1">
<tr><td>Table stuff goes out here</td></tr>
</table>
</div>
<div class="subMenuBackground" id="who">
<table class="subMenuOptions" border="0" cellpadding="0" cellspacing="1">
<tr><td>Table stuff goes out here</td></tr>
</table>
</div>
</div><!--End of subMenus-->
Et voici mon JavaScript/JQuery:
$(document).ready(function(){
$('.subMenuOptions').css({'opacity': 0.0});
$('.subMenuBackground').css({
'height': '0px',
'padding': '0px',
'width': '0px',
'marginLeft': 'auto',
'marginRight': 'auto',
});
// ***This makes a normal rollover just fine***
// $('a#how img').mouseenter(function(){
// $(this).attr('src', $(this).attr('src').split('.').join('Over.'));
// }).mouseleave(function(){
// $(this).attr('src', $(this).attr('src').split('Over.').join('.'));
// });
$('#how').mouseenter(function(){
$('.subMenuBackground#how').animate({paddingTop:'2px'}, 'slow', 'quartEaseInOut')
.animate({width:'100%', paddingRight:'2px', paddingLeft:'2px'}, 350, 'circEaseOut')
.animate({height:'100%', paddingBottom:'2px'}, 250, 'circEaseOut', function(){
$(this).children().animate({opacity:1}, 250, 'circEaseOut');
});
// This works to make the rollover tab image to appear, but mirroring this function in the other two .mouseleave events doesn't work :(
$('a#how img').attr('src', 'howButOver.jpg');
});
$('.subMenuBackground#how').mouseleave(function(){
$('.subMenuBackground#how').animate({width:'0%', paddingRight:'0px', paddingLeft:'0px'}, 100, 'quartEaseIn')
.animate({height:'0%', paddingTop:'0px', paddingBottom:'0px'}, 100, 'quartEaseIn', function(){
$(this).children().animate({opacity:0}, 1, 'quartEaseOut');
});
});
// For whatever reason, the previous function did not work if I rolled over other buttons - the table would not disappear, so I had to make this specific function for when you entered another top nav button
$('.topButton:not(#how)').mouseenter(function(){
$('.subMenuBackground#how').animate({width:'0%', paddingRight:'0px', paddingLeft:'0px'}, 100, 'quartEaseIn')
.animate({height:'0%', paddingTop:'0px', paddingBottom:'0px'}, 100, 'quartEaseIn', function(){
$(this).children().animate({opacity:0}, 1, 'quartEaseOut');
});
});
// I was hoping it would be as easy as this, but this does not work.
$('#how').mouseleave(function(){
$('a#how img').attr('src', 'howBut.jpg');
});
});