0
私はこのサイトには新人なので、助けが必要です！jQueryの非定型オブジェクト上のロールオーバー
私は、ロールオーバーするとテーブルを表示します（私はそれを完了しました）、そして自分のイメージをタブに変更しますが、マウスが去るまでロールオーバータブイメージを保持するボタンが必要ですボタンまたはそのそれぞれのテーブル（これは問題です）。
基本的には、画像を変更したり、テーブルを拡大して適切に消さなければならないのはかなり簡単ですが、離れた場所やテーブルから移動すると元の画像に戻ることはできませんに属する。
通常のロールオーバーのように動作するコード行がありますが、下の表が同じオブジェクト内にネストされていないため、イメージがロールオーバーしたままになるため、イメージがロールバックされるため、
私のボタンとそのテーブルが一緒にネストされていないという事実は、私が子どもや祖先を横切ることができないので、事実を複雑にすることを知っていますが、その周りに道があると思います。
以下は、私が働いている人がさまざまな部分の連続したアニメーションをたくさん欲しかったので、私がやろうとしていることのために非常に難しいサンプルコードです。ここで
は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-->
そして、ここでは私は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');
});
});