0
任何人都可以請解釋爲什麼下面的jQuery滑塊不工作？我的四個網站頁面中的每一個都包含在具有ids'target1'，'target2'等的div中。我希望當您按下#headingLogoBar中的鏈接時，頁面將滑入（不移動#headinglogobar）側。 （另外，我該如何做到這一點，所以你一次只能激活一個鏈接，即不允許一個動畫在激活另一個動畫時激活）。jQuery滑塊不起作用。按鏈接什麼也不做
我希望我的網站基本上具有相同的功能： http://jsfiddle.net/sg3s/rs2QK/
CSS：
body, html {
height: 100%;
margin:0 auto;
width:100%;
background-color: #f1f1f1;
}
#wrapper {
width:960px;
height: 630px;
margin:0 auto;
font-family: Arial;
color: #555;
background-color: white;
vertical-align: middle;
overflow: hidden;
position: relative;
top: 50%;
transform: translateY(-50%);
}
div.forMovingPanel {
position: absolute;
height: 100%;
width: 100%;
display:none;
}
HTML：
<div id="wrapper">
<div id="headingLogoBar">
<ul>
<li id="menuDisplayedHome"><a href="#target1" class="forMovingpanel">HOME</li>
<li id="menuDisplayedAbout"><a href="#target2" class="forMovingpanel">ABOUT</a></li>
<li id="menuDisplayedPortfolio"><a href="#target3" class="forMovingpanel">PORTFOLIO</a></li>
<li id="menuDisplayedContact"><a href="#target4" class="forMovingpanel">CONTACT</a></li>
</ul>
</div>
<div class="forMovingPanel" id="target1"></div>
<div class="forMovingPanel" id="target2"></div>
<div class="forMovingPanel" id="target3"></div>
<div class="forMovingPanel" id="target4"></div>
</div>
的jQuery：
<script>
jQuery(function($) {
$('a.forMovingPanel').click(function() {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active');
if (!$target.hasClass('active')) {
$other.each(function(index, self) {
var $this = $(this);
$this.removeClass('active').animate({
left: $this.width()
}, 500);
});
$target.addClass('active').show().css({
left: -($target.width())
}).animate({
left: 0
}, 500);
}
});
});
</script>