jQuery 滑块不工作。按链接什么都不做

Question

谁能解释一下为什么下面的 jQuery 滑块不起作用？我的四个网站页面中的每一个都包含在具有 ID 'target1'、'target2' 等的 div 中。我希望当您在 #headingLogoBar 中按下 links 时，页面会滑入（不移动#headinglogobar）从侧面。

（另外，我该怎么做才能一次只能激活一个 link，即不允许在激活一个动画的同时激活另一个动画）。

我希望我的网站基本上具有与以下功能相同的功能： 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>

Answer 1

您的代码中有一个简单的拼写错误。

click event 有选择器 forMovingPanel，但是你的 a element 有 class forMovingpanel（有一次面板的 p 是大写的而另一个则没有）。

对于您的动画检查，请查看以下链接之一：

jQuery animation detect if animating?
How do I find out with jQuery if an element is being animated?

jQuery 滑块不工作。按链接什么都不做

jQuery slider not working. Pressing links does nothing

css

jquery

slider