Question

我是网站新手，需要一些帮助！

我需要按钮，当翻过来时，它们会显示一个表格（我完成了），并将自己的图像更改为标签（他们这样做），但保留翻转标签图像，直到鼠标离开按钮或其各自的表（这是问题）。

基本上，它很容易让它改变图像，并且必须正确扩展和消失，但当你离开它们或它们属于的表时，我无法让按钮返回到它们的原始图像到。

我有一行代码使它们表现得像常规翻转，但这并不好，因为下面的表没有嵌套在同一个对象中，因此当我希望它保持翻转时图像会回滚。

我知道我的按钮和它们的表没有嵌套在一起的事实使事情变得复杂，因为我不能与孩子或祖先交往，但我希望有一种解决方法。

下面是我的示例代码，由于我工作的人想要不同部分的大量连续动画，因此我正在尝试做的事情非常棘手。

这是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');
                               });

});

Answer 1

一个问题是你有多个具有相同ID的元素：

<a href="#" class="topButton" id="how">
//...
<a href="#" class="topButton" id="who">
//...
<div class="subMenuBackground" id="how">
//...
<div class="subMenuBackground" id="who">

每个ID必须是唯一的。

在jQuery中对非后代对象进行翻转

1 个答案: