Question

我使用jQuery和css制作了一个有四个菜单的页面，当用户点击每个菜单时，背景图像会发生变化。
这是我的 HTML：

<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <meta charset="utf-8">
  <title>Test</title>
</head>
<body>
    <div id="wrapper">
      <div id="wrapper2"><!-- Wrapper (2) -->
      <div class="pro" id="product_wrapper">

                <!-- LOGO -->
                <div id="logo">
                <h1 id="logo">Some Text</h1>
            </div> <!-- /- LOGO -->

        <div id="pad_wrapper"><!-- pad wrapper -->

        <div class="right_pad" id="pad1"><!-- pad1 -->
                <span>one</span>
              </div><!-- /- Pad1 -->

              <div class="right_pad" id="pad2"><!-- pad2 -->
                <span>Two</span>
              </div><!-- /- pad2 -->

              <div class="right_pad" id="pad3"><!-- pad3 -->
                <span>Three</span>
              </div><!-- /- pad3 -->

              <div class="right_pad" id="pad4"><!-- pad4 -->
                <span>Four</span>
              </div><!-- /- pad4 -->

          </div><!-- /- Pad Wrapper -->

          <div id="desc">

          </div><!-- /- desc -->

        <div class="image_wrapper"><!-- Image Wrapper -->

            <div class="img" id="image1">
            <img src="http://www.newildernesstrust.org/wp-content/uploads/2013/04/Bird.jpg" width="850" height="550"  alt=""/>
          </div><!-- Image1 -->

          <div class="img" id="image2">
            <img src="http://digital-photography-school.com/wp-content/uploads/2007/02/images/bird-photography.jpg" width="850" height="550"  alt=""/>
          </div><!-- Image2 -->

          <div class="img" id="image3">
            <img src="http://www.bubblews.com/assets/images/news/172155891_1366453638.jpg" width="850" height="550"  alt=""/>
          </div><!-- Image3 -->

          <div class="img" id="image4">
            <img src="http://upload.wikimedia.org/wikipedia/commons/9/93/Red_Lory_(Eos_bornea)_Jurong_Bird_Park2-3c.jpg" width="850" height="550"  alt=""/>
          </div><!-- Image4 -->

        </div><!-- Image Wrapper -->

    </div><!-- /- product_wrapper -->
    </div><!-- /- wRAPPEr (2) -->
  </div><!-- Wrapper -->

</body>
</html>

这是 CSS：

/* CSS Document */
body {
    background:#EEE;
}
#wrapper {
    margin:auto;
    width:850px;
    height:550px;   
}
#wrapper2 {
    overflow:hidden;    
}
.pro {
    box-shadow:0 0px 30px 1px #AAA;
    background:#9FF;
    border:5px solid #FFF;
    direction:rtl;
    height:550px;
    margin:auto;
    position:absolute;
    overflow:hidden !important;
    width:850px;    
}
h1#logo{
    color:#FFF;
    font-family:"B Koodak", Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-size:38px;
    float:left;
    margin-top:20px;
    margin-right:650px;
    position:absolute;
    width:200px;
}
.right_pad {
    background-color:#222222; /*56514a*/
    border-radius: 4px 0px 0px 20px;
    color:#FFF;
    cursor:pointer;
    float:right;
    font-family:"B Koodak", Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-size:21px;
    clear:both;
    height:50px;
    margin-top:5px;
    opacity:0.7;
    width:150px;
    z-index:999;
}
.right_pad span {
    float:left;
    padding-top:3px;
    padding-left:10px;  
}
.right_pad img {
    z-index:1;
}
#pad1 {
    background-color:#222222;
    opacity:1;
    width:280px;
}
#pad_wrapper {
    margin-top:35px;
    position:absolute;
}
#desc {
    background-color:#000;
    border-radius:0 10px 0 0;
    margin-top:300px;
    margin-right:200px;
    opacity:0.6;
    height:250px;
    position:absolute;
    width:650px;    
}

和 jQuery：

$(document).ready(function(e) {
    $('.img').not('#image1').hide();
    $('#pad_wrapper').on('click', '.right_pad', function(e) {

        $('.right_pad')
        .not(this)
        .stop(true, true)
        .animate({width:150, opacity:0.7}, 'slow', 'easeOutCirc', false)
        .css({'background-color':'#222222'});/*56514a*/

        $(this)
        .stop(true, true )
        .animate({width:300, opacity:1}, 'slow', 'easeOutBounce', false)
        .css({'background-color':'#222222'}); /* easeInOutElastic */

        $('#desc')
        .stop(true, true)
        .animate({marginTop:560}, 'fast', 'easeInOutQuart', false)
        .fadeOut('fast', 'easeInOutQuart', function(){
            $(this).fadeIn(50)
            .animate({marginTop:300}, 'slow', 'easeOutCirc', false);
        });/* CallBack For #desc */

        var name = $(this).attr('id');
        var num = name.substr(3);

        var img = 'image'+ num;

        $('div.img').fadeOut('slow', 'swing');

        $('#' + img ).fadeIn('slow', 'swing');


    });/* #desc */

});

您可以看到The Result and whole code Here
当我点击菜单1,2,3和4 in order时，每件事都很好，但当我点击菜单从4到1时，意味着，4，3，2和1，{{1再次单击活动菜单，菜单将淡出并显示图像...... !!!
我没有写任何有关淡化代码中菜单的事情当我删除or

时，我想出了这一点

this lines:

从我的jQuery代码中，这个问题将得到解决有趣的是，页面在$('div.img').fadeOut('slow', 'swing'); $('#' + img ).fadeIn('slow', 'swing');中工作正常但在Chrome和Firefox中没有我不知道我的代码的哪一部分是错的......
请告诉我，我的错在哪里...... 谢谢你提前......

Answer 1

好的，问题是#pad_wrapper必须建立z-index

#pad_wrapper {
margin-top:35px;
position:absolute;
    z-index:100;
}

你有一个带有z-index的单独的pad，但是它们包含在包装器中，并且不会比包装器本身更进一步

内容滑块奇怪的行为

1 个答案: