How to add a transition effect in the Quick Pager plugin?

Hi, everybody!!

As per the title, I'd like to add some lines of code in this plugin in order to get the same transition effect that appears when switching between pages in another plugin named Text Pager, about which I provided you the code and commented the lines that should (and I mean should) be just right for me:

/**
*
*  Text Pager - jQuery plugin for create pages on div
*  Copyright (c) 2014 Dmitrij Waśkowski
*
*  Licensed under the MIT license:
*  http://www.opensource.org/licenses/mit-license.php
*
*  Project home:
*  https://github.com/dwaskowski/jquery_textpager
*
*  Version:  1.0
*
*/


!function(e, t, o, n) {
    e.fn.textpager = function(options) {
        var parent = $('<div>').insertBefore($(this));
        $(this).css('overflow','hidden').appendTo($(parent));
        var eOptions = {
            controlArrows:          (typeof(options) !== "undefined" && options !== null && typeof(options.controlArrows) !== "undefined" && options.controlArrows !== null) ? options.controlArrows : '',
            controlArrowsEnabel:    (typeof(options) !== "undefined" && options !== null && typeof(options.controlArrowsEnabel) !== "undefined" && options.controlArrowsEnabel !== null) ? options.controlArrowsEnabel : true,
            controlPages:           (typeof(options) !== "undefined" && options !== null && typeof(options.controlPages) !== "undefined" && options.controlPages !== null) ? options.controlPages : '',
            controlPagesEnabel:     (typeof(options) !== "undefined" && options !== null && typeof(options.controlPagesEnabel) !== "undefined" && options.controlPagesEnabel !== null) ? options.controlPagesEnabel : true,
            controlPagesContent:    (typeof(options) !== "undefined" && options !== null && typeof(options.controlPagesContent) !== "undefined" && options.controlPagesContent !== null) ? options.controlPagesContent : 'div'
        };

        var fulltextHeight = 0;
        $(this).children().each(function(){
            fulltextHeight += $(this).height();
        });

        var textareaHeight = $(this).height();
        var textareaWidth = $(this).width();

        if(textareaHeight<fulltextHeight){
            var pageNow = 1;
            var margTop = 0;
            var pages = Math.ceil(fulltextHeight/textareaHeight);

            if (eOptions.controlArrows==='') {
                $('<div>').addClass('tp-control-arrows').appendTo($(parent));
                eOptions.controlArrows = $(parent).find('.tp-control-arrows');
                $('<a>').addClass('tp-control-arrow-left').addClass('unactive').html('<span><</span>').appendTo($(eOptions.controlArrows));
                $('<a>').addClass('tp-control-arrow-right').html('<span>></span>').appendTo($(eOptions.controlArrows));
            }
            if (eOptions.controlPages==='') {
                $('<div>').addClass('tp-control-pages').appendTo($(parent));
                eOptions.controlPages = $(parent).find('.tp-control-pages');
            }
            var controlElements = '';
            for (var pageCount=0;pageCount<pages;pageCount++) {
                controlElements += $('<'+eOptions.controlPagesContent+'>')
                        .attr('data-page',''+(pageCount+1))
                        .html('<span>'+(pageCount+1)+'</span>')
                        .addClass('tp-page')
                        .addClass(!pageCount ? 'active' : '')
                        .prop("outerHTML");
            }
            $(eOptions.controlPages).html(controlElements);
            $(this).css('height',textareaHeight+'px').css('padding',0);
            var contentHtml = $(this).html();
            $(this).html('');
            $('<div>').addClass('tp-horizontalbox').css('height',textareaHeight+'px').css('width',textareaWidth+'px').appendTo($(this));
            $('<div>').addClass('tp-vertivalbox').html(contentHtml).css('width',textareaWidth+'px').appendTo($(this).find('.tp-horizontalbox'));

            var self = this;
            $(eOptions.controlArrows).find('.tp-control-arrow-left').unbind('click').click(function(){
                var thisPage = pageNow-1;
                if(thisPage<1){
                    return;
                }
                if(thisPage==1){
                    $(this).addClass('unactive');
                }
                $(eOptions.controlArrows).find('.tp-control-arrow-right').removeClass('unactive');
                var nextPage = (thisPage-pageNow)*textareaHeight;
                margTop -= nextPage;
                pageNow = thisPage;
                $(eOptions.controlPages).find(eOptions.controlPagesContent+'.tp-page').removeClass('active');
                $(eOptions.controlPages).find(eOptions.controlPagesContent+'[data-page="'+thisPage+'"]').addClass('active');
                self.animateStep(self, textareaWidth, margTop, false); // piece of code that calls the animateStep function
            });
            $(eOptions.controlArrows).find('.tp-control-arrow-right').unbind('click').click(function(){
                var thisPage = pageNow+1;
                if(thisPage>pages){
                    return;
                }
                if(thisPage==pages){
                    $(this).addClass('unactive');
                }
                $(eOptions.controlArrows).find('.tp-control-arrow-left').removeClass('unactive');
                var nextPage = (thisPage-pageNow)*textareaHeight;
                margTop -= nextPage;
                pageNow = thisPage;
                $(eOptions.controlPages).find(eOptions.controlPagesContent+'.tp-page').removeClass('active');
                $(eOptions.controlPages).find(eOptions.controlPagesContent+'[data-page="'+thisPage+'"]').addClass('active');
                self.animateStep(self, textareaWidth, margTop, true); // piece of code that calls the animateStep function
            });
            $(eOptions.controlPages).find(eOptions.controlPagesContent+'.tp-page').unbind('click').click(function(){
                var thisPage = $(this).data('page');
                if(thisPage===pageNow) {
                    return;
                }
                var goAhead = true;
                if(thisPage<pageNow) {
                    goAhead = false;
                }

                if (thisPage==1) {
                    $(eOptions.controlArrows).find('.tp-control-arrow-left').addClass('unactive');
                    $(eOptions.controlArrows).find('.tp-control-arrow-right').removeClass('unactive');
                } else if(thisPage==pages) {
                    $(eOptions.controlArrows).find('.tp-control-arrow-right').addClass('unactive');
                    $(eOptions.controlArrows).find('.tp-control-arrow-left').removeClass('unactive');
                } else {
                    $(eOptions.controlArrows).find('.tp-control-arrow-right').removeClass('unactive');
                    $(eOptions.controlArrows).find('.tp-control-arrow-left').removeClass('unactive');
                }

                var nextPage = (thisPage-pageNow)*textareaHeight;
                margTop -= nextPage;
                pageNow = thisPage;
                $(eOptions.controlPages).find(eOptions.controlPagesContent+'.tp-page').removeClass('active');
                $(this).addClass('active');
                self.animateStep(self, textareaWidth, margTop, goAhead); // piece of code that calls the animateStep function
            });


        }

        // function that creates the transition effect
        this.animateStep = function(parent, textareaWidth, margTop, goAhead){
            $(parent).find('.tp-horizontalbox')
                .animate({
                    marginLeft: (goAhead ? "-="+textareaWidth : "+="+textareaWidth)
                }, 400, function(){
                    $(this)
                    .css({
                        marginLeft: (goAhead ? "+="+(textareaWidth*2) : "-="+(textareaWidth*2))
                    })
                    .find('.tp-vertivalbox')
                    .css({
                        marginTop: margTop
                    });
                    $(this)
                    .animate({
                        marginLeft: (goAhead ? "-="+textareaWidth : "+="+textareaWidth)
                    }, 400)
                    .find('.tp-vertivalbox')
                    .animate({
                        opacity: 1
                    }, 400);
                })
                .find('.tp-vertivalbox')
                .animate({
                    opacity: 0
                }, 400);
        }
    };

}(jQuery, window, document);

Code (JavaScript):

And this is the code regarding Quick Pager wherein I'd like to implement only the function stated above:

(function($) {

    $.fn.quickPagination=function(options) {

        var defaults = {
            pageSize: 10,
            currentPage: 1,
            holder: null,
            pagerLocation: "after"
        };

        var options = $.extend(defaults, options);


        return this.each(function() {


            var selector = $(this);
            var pageCounter = 1;

            selector.wrap("<div class='simplePagerContainer'></div>");

            selector.parents(".simplePagerContainer").find("ul.simplePagerNav").remove();
       
            selector.children().each(function(i) {

                if(i < pageCounter*options.pageSize && i >= (pageCounter-1)*options.pageSize) {
                $(this).addClass("simplePagerPage"+pageCounter);
                }
                else {
                    $(this).addClass("simplePagerPage"+(pageCounter+1));
                    pageCounter ++;
                }
           
            });
       
       
            selector.children().hide();
            selector.children(".simplePagerPage"+options.currentPage).show();

            if(pageCounter <= 1) {
                return;
            }


            var pageNav = "<ul class='simplePagerNav'>";
            for (i=1;i<=pageCounter;i++) {
                if (i==options.currentPage) {
                    pageNav += "<li class='currentPage simplePageNav"+i+"'><a rel='"+i+"' href='#'>"+i+"</a></li>";
                }
                else {
                    pageNav += "<li class='simplePageNav"+i+"'><a rel='"+i+"' href='#'>"+i+"</a></li>";
                }
            }
            pageNav += "</ul>";

            if(!options.holder) {
                switch(options.pagerLocation)
                {
                case "before":
                    selector.before(pageNav);
                break;
                case "both":
                    selector.before(pageNav);
                    selector.after(pageNav);
                break;
                default:
                    selector.after(pageNav);
                }
            }
            else {
                $(options.holder).append(pageNav);
            }


            selector.parent().find(".simplePagerNav a").click(function() {


                var clickedLink = $(this).attr("rel");
                options.currentPage = clickedLink;

                if(options.holder) {
                    $(this).parent("li").parent("ul").parent(options.holder).find("li.currentPage").removeClass("currentPage");
                    $(this).parent("li").parent("ul").parent(options.holder).find("a[rel='"+clickedLink+"']").parent("li").addClass("currentPage");
                }
                else {

                    $(this).parent("li").parent("ul").parent(".simplePagerContainer").find("li.currentPage").removeClass("currentPage");

                    $(this).parent("li").parent("ul").parent(".simplePagerContainer").find("a[rel='"+clickedLink+"']").parent("li").addClass("currentPage");
                }


                selector.children().hide();
                selector.find(".simplePagerPage"+clickedLink).show();

                return false;
            });
        });
    }


})(jQuery);

Code (JavaScript):

And obviously thanks in advance to all of you for your time and attention!!

Regards.

Furlan86