内容滑块的异常行为
[英]content slider strange behavior
问题描述
I made a page using jQuery and css that have four menu and when user click on each menu, background image will change. 
我使用jQuery和CSS创建了一个具有四个菜单的页面，当用户单击每个菜单时，背景图像将发生变化。
this is my HTML: 这是我的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>
and this is CSS: 这是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;
}
and jQuery: 和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 */
});
You can see The Result and whole code Here 您可以在此处查看结果和整个代码
When I click on the menu one, two, three and four in order , every thing is fine, BUT when I click on the menus from four to One, means, four, three, two, and one, or click again on active menu, the menus will fade out and in with images...!!! 当我in order单击菜单1、2、3和4 in order ，一切都很好，但是当我从4到1单击菜单时，意味着4、3、2和1， or再次单击活动菜单，菜单将淡出并带有图像... !!!
I didn't write any thing about fading the menus in my code. 我没有编写任何有关在代码中淡化菜单的内容。
either I figured out that when I remove this lines: 要么我发现当我删除this lines:行时this lines:
$('div.img').fadeOut('slow', 'swing');
$('#' + img ).fadeIn('slow', 'swing');
from my jQuery code, this problem will be solved. 从我的jQuery代码中，将解决此问题。
The funny thing is that the page works fine in Internet Explorer8 but in Chrome and Firefox do not. 有趣的是，该页面在Internet Explorer8可以正常工作，但在Chrome和Firefox中却不能。
I don't know which part of my code is wrong... 我不知道我的代码哪一部分错了...
Please tell me that where is my fault... Thanks in advanced... 请告诉我我的错在哪里...在此先感谢...
1 个解决方案
解决方案1
1 已采纳 2014-02-06 18:51:19
Ok, so the issue was the #pad_wrapper had to have a z-index established 好的，所以问题是#pad_wrapper必须建立z索引
#pad_wrapper {
margin-top:35px;
position:absolute;
z-index:100;
}
You had the individual pads with a z-index but they are contained inside the wrapper and won't go any further than the wrapper itself 您具有带有z索引的单个垫，但它们包含在包装纸内，并且不会超出包装纸本身
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.