0

我对 jQuery / javascript 比较陌生，但我遇到了一个看起来很简单的问题来解决，我就是看不出有什么问题。对不起，如果这最终很简单，但我已经搜索了负载但没有结束。

我试图让各种 div 淡入或淡出，具体取决于它们是否“可见”。当单击“下一个”箭头时，这些 div 实际上是我想要前进的“页面”。

这是我的 jQuery：

$(document).ready(function(){    
   $("#page1 > div").hide();
   $("#page2 > div").hide();
   $("#page3 > div").hide();

   $("#page1 > div").fadeIn(800);

   $("#NextArrow").click(function(){
      if($("#page1").is(":visible")){
         $("#page1 > div").fadeOut(800);
         $("#page2 > div").fadeIn(800);
      }
      else if($("#page2").is(":visible")){
         $("#page2 > div").fadeOut(800);
         $("#page3 > div").fadeIn(800);
      }
      else {
         alert("no page");
      }
   })
})

这是html：

<table id="MainTable" width="765" border="0" align="center">
    <tr>
        <td align="left" valign="top" style="min-height:400px; padding-left:10px; padding-top:10px">
            <div id="page1" style="position:absolute">
                <div id="p1Title">Introduction</div>
                <p></p>
                <div id="p1Detail">....detail.....</div>
            </div>
            <div id="page2" style="position:absolute">
                <div id="p2Title">Introduction - continued</div>
                <p></p>
                <div id="p2Detail">....detail.....</div>
            </div>
            <div id="page3" style="position:absolute">
                <div id="p3Title">Members</div>
                <p></p>
                <div id="p3Detail">....detail.....</div>
            </div>
        </td>
    </tr>
    <tr>
        <td align="right">
            <div id="NextArrow"></div>
        </td>
    </tr>
</table>

这是“NextArrow”的CSS：

#NextArrow
{
  width:120px;
  height:34px;
  background-image:url('NextArrow.gif');
}

#NextArrow:hover
{
  background-image:url('NextArrowHover.gif');
}

所以这就是问题所在。当我单击“NextArrow”div 时，它会按预期淡出“page1”div 并淡入“page2”div。但是，当我再次单击它时，没有任何反应，甚至没有收到“无页面”警报。

4

2 回答 2

5

你的回答是一个微不足道的逻辑问题。fadeOut淡出元素 - 而不是它的父元素。该:visible检查检查您指定的容器的状态 - 而不是它的父容器。

你正在淡出#page1 > div而不是#page1。因此，虽然为空，但您#page1的仍然可见。因此，$('#page1').is(':visible')无论您的页面状态如何，它始终是正确的。

考虑更改淡出/淡入淡出调用以淡化页面 ID 而不是它们包含的 div。

于 2013-05-14T15:09:26.307 回答
1

问题是您正在检查是否#page1可见，如果是，您正在淡出其中的<div>元素，这不会使其#page1不可见。

试试这个：

if($("#page1").is(":visible")){
    $("#page1").fadeOut(800);
    $("#page2").fadeIn(800);
}
于 2013-05-14T15:10:31.600 回答