为什么每个按钮只能工作一次？

Question

I am trying to create a div navigation for some flash banners I have created. The code I have written works in ascending order, but once you have clicked past one, you cannot go back to it. How do I make it like a navigation where each title can be clicked repeatedly in any order and it will work?

fiddle is here: http://jsfiddle.net/0fq19a80/ code is here:

HTML

   <h3 id="black120">120x600</h3> <h3 id="black160">160x600</h3> <h3 id="blackMPU">300x250</h3> <h3 id="black728">728x90</h3> <h3 id="black300">300x600</h3> <h3 id="black970">970x250</h3>

            <div id="main">
        <div id="allPages">
        <div id="page1" class="current">
            <h1>PAGE1</h1>
        </div>
        <div id="page2">
            <h1>PAGE2</h1>
        </div>

        <div id="page3">
            <h1>PAGE3</h1>
        </div>

        <div id="page4">
            <h1>PAGE4</h1>
        </div>

        <div id="page5">
            <h1>PAGE5</h1>
        </div>

        <div id="page6">
            <h1>PAGE6</h1>
        </div>
        </div>
        </div>`

CSS

#main {
margin-left: 100px;
width: 1000px;
height: 700px;
border: 1px solid red;
overflow: hidden;
position: absolute;
top: 200px;
}

#allPages > div {
display: none;
position: absolute;
top: 0px;
left: 0px;
}

#allPages > div.current {
display: block;
}

#page1 {
width: 1000px;
height: 700px;
background-color: red;
}

#page2 {
width: 1000px;
height: 700px;
background-color: grey;
}

#page3 {
width: 1000px;
height: 700px;
background-color: pink;
}

#page4 {
width: 1000px;
height: 700px;
background-color: green;
}

#page5 {
width: 1000px;
height: 700px;
background-color: orange;
}

#page6 {
width: 1000px;
height: 700px;
background-color: blue;
}

JS

$(document).ready(function(){
    $("#black120").click(function(){
            nextPage("#page1","fade");
    });

    $("#black160").click(function(){
            nextPage("#page2","fade");
    });

    $("#blackMPU").click(function(){
            nextPage("#page3","fade");
    });

    $("#black728").click(function(){
            nextPage("#page4","fade");
    });

    $("#black300").click(function(){
            nextPage("#page5","fade");
    });

    $("#black970").click(function(){
            nextPage("#page6","fade");
    });
});

function nextPage(to, type){ 
var to = $(to),
    from = $("#allPages .current");

to
.addClass("current " + type + " in")
.one("webkitAnimationEnd msAnimationEnd animationend oAnimationEnd", function(){
  from.removeClass("current " + type + " out" );
  to.removeClass(type + " in");
});
from.addClass(type + " out ");
}

Answer 1

You need to remove current class from from page before you add it to the next one. from.removeClass() will do the job:

function nextPage(to, type) {
    var to = $(to),
        from = $("#allPages .current");

    from.removeClass();
    to.addClass("current " + type + " in").one("webkitAnimationEnd msAnimationEnd animationend oAnimationEnd", function () {
        from.removeClass("current " + type + " out");
        to.removeClass(type + " in");
    });
    from.addClass(type + " out ");
}

Demo: http://jsfiddle.net/0fq19a80/2/