jQuery slider not working. Pressing links does nothing

Question

Could anyone please explain why the following jQuery slider is not working? Each of my four website pages is contained within the divs with the ids 'target1', 'target2' etc. I was hoping that when you press the links in #headingLogoBar, the pages would slide in (without moving the #headinglogobar) from the side.

(Also, how do I make it so you can only activate one link at a time i.e. not allow one animation to activate whilst another is activated).

I want my website to essentially have the same functionality as: 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>

score 0 · Accepted Answer · edited May 23 '17 at 12:03

0

You have a simple typo in your code.

The click event has the selector forMovingPanel, but your a element has the class forMovingpanel (one time the p of panel is upper-case and the other not).

And for your animation check have a look at one of these links:

edited May 23 '17 at 12:03

Community

1
1

answered Nov 04 '15 at 18:50

twain

1,305
11
16

jQuery slider not working. Pressing links does nothing

1 Answers1