Question

有谁能解释为什么以下jQuery滑块不起作用？我的四个网站页面中的每一个都包含在div中，其中包含ID＆＃39; target1＆＃39;，＆＃39; target2＆＃39;我希望当你按下#headingLogoBar中的链接时，页面会从侧面滑入（不移动#headinglogobar）。

（另外，我如何制作它，这样你一次只能激活一个链接，即不允许激活一个动画而激活另一个动画）。

我希望我的网站基本上具有以下相同的功能： 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有forMovingpanel类（有时面板的p为大写，而另一个不是）。

对于动画检查，请查看其中一个链接：

jQuery滑块无法正常工作。按链接什么都不做

1 个答案: