Home/ Questions/Q 8631159
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T09:10:48+00:00

I have two js function as given below the function nextPage is working fine

  • 0

I have two js function as given below the function nextPage is working fine but the previousPage function when called the event webkitAnimationEnd doesn’t work as desired.
Link to jsfiddle:link to jsfiddle.

var currentPage = 0;
    function nextPage()
    {   
        alert(currentPage);
        var pages   = document.getElementsByClassName('pages');
        pages[currentPage].className = "pages pageanim";
        pages[currentPage].addEventListener('webkitAnimationEnd', function(){
        this.style.left     = '0%';
        this.style.zIndex   = currentPage;
        currentPage = currentPage+1;
    }, false);

}

    function previousPage()
    {   
        //alert(currentPage);
        var pages   = document.getElementsByClassName('pages pageanim');
        pages[0].className = "pages revpageanim";
    
        pages[0].addEventListener('webkitAnimationEnd', function(){
        this.style.left     = '49%';
        this.style.zIndex   = currentPage+1;
        currentPage = currentPage-1;
    }, false);
    }

Here is my html:

  <body onLoad="applyZindex();">
   <!-- Add your site or application content here -->
  <header><button class="nav left" onClick="previousPage();">&lt;&lt;prev</button>
<h3 class="left">Previewer (TM)
</h3><button class="nav right" onClick="nextPage();">
next>></button></header>
            <section style=" position:relative;">
            <img src="img/1.jpg" alt="page1" title="page1" class="pages" />
            <img src="img/2.jpg" alt="page2" title="page2" class="pages" />
            <img src="img/3.jpg" alt="page1" title="page1" class="pages" />
            <img src="img/4.jpg" alt="page2" title="page2" class="pages"  />
            </section>
            <footer></footer>
        </body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    http://jsfiddle.net/K8Tuy/28/ here you go;

    So, you need to removeEventListener on every click if you also addEventListener on every click;
    Generally, its not a good idea to addEventListener on every click. It should be initialize once and your logic should be inside the buttons.

    var currentPage = 0;
    function nextPage()
    {   
        var pages   = document.getElementsByClassName('pages');
        pages[currentPage].className = "pages pageanim";
        pages[currentPage].addEventListener('webkitAnimationEnd', function(){
            this.style.left     = '0%';
            this.style.zIndex   = currentPage;
            pages[currentPage].className = "pages";
            currentPage = currentPage+1;
            this.removeEventListener('webkitAnimationEnd',arguments.callee,false);
            console.log(currentPage);
        }, false);

}

    function previousPage()
    {   
        //alert(currentPage);
        var pages   = document.getElementsByClassName('pages');
        page = pages[currentPage-1];
        page.className = "pages revpageanim";

        page.addEventListener('webkitAnimationEnd', function(){
            currentPage = currentPage-1;
            this.style.left     = '49%';
            page.style.zIndex   = pages.length-currentPage;
            page.className = "pages";
            this.removeEventListener('webkitAnimationEnd',arguments.callee,false);
            console.log(currentPage);
        }, false);
    }​

    EDIT:
    http://jsfiddle.net/K8Tuy/35/ — arguments.callee replaced with “function name”

    • 0