Javascript 在jquery中再次导航回同一页面后，如何停止动画？

我正在visual studio 2012上制作一个应用程序。我正在从主页导航到levelOne。在一个按钮上单击一级，我正在制作一些动画，在动画期间，如果我使用windows后退按钮返回主页，然后再次返回到一级，我将运行动画，我希望此动画停止。 这是动画将出现的第一页：

    (function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/levelOne/levelOne.html", {
    // This function is called whenever a user navigates to this page. It
    // populates the page elements with the app's data.
       ready: function initiazlize(element, options) {
            document.getElementById("play").addEventListener("click",function initial(){
                roundCount++;
                if (flag1 == false) {
                    //if flag1 is false that means its time for next storyboard
                    j = 0;
                    var r3 = Math.random();
                    if (r3 <= 0.333) {
                        $(Left).animate({ marginTop: '-=100px' }, 500);
                        $(Left).animate({ marginTop: '+=100px' }, 500, animateAsync);
                        //document.getElementById("play").disabled = false;
                    }
                    else if (r3 <= 0.666) {
                        $(midle).animate({ marginTop: '-=100px' }, 500);
                        $(midle).animate({ marginTop: '+=100px' }, 500, animateAsync);
                        //document.getElementById("play").disabled = false;
                    }
                    else {
                        $("#bowlThree").animate({ marginTop: '-=100px' }, 500);
                        $("#bowlThree").animate({ marginTop: '+=100px' }, 500, animateAsync);
                        //document.getElementById("play").disabled = false;
                    }
                    //inside animate Async(), some more animation on capOne,capTwo,capThree and on object, I want to stop animation on these
                    //There is a counter j, when j reachs 100 animation is stopped
                }
            });
            document.onbeforeunload = function () {
                j = 100;
                flag1 = true;
                $("#capOne").stop(true, false);
                $("#capTwo").stop(true, false);
                $("#capThree").stop(true, false);
                clearTimeout(variableTimer);
                window.cancelAnimationFrame(variableTimer);
                Debug;
            };
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
            $("#capOne").stop();

            $("#capOne").css({ "margin-top": "360px", "margin-left": "250px" })
            $("#capTwo").css({ "margin-top": "360px", "margin-left": "580px" })
            $("#capThree").css({ "margin-top": "360px", "margin-left": "910px" })
            ////return false;
            $("#capOne").fadeOut(100);                                                  

            WinJS.UI.disableAnimations();
            flag1 = true;//if flag1=false then animation is stopped                                   
            $("#capOne").stop(true, false);
            $("#capTwo").stop(true, false);
            $("#capThree").stop(true, false);
            clearTimeout(document.variableTimer);
            window.cancelAnimationFrame(document.variableTimer);
            debugger;
        },

        updateLayout: function (element, viewState, lastViewState) {
            /// <param name="element" domElement="true" />
            // TODO: Respond to changes in viewState.
        }
    });
})();

（函数（）{
“严格使用”；
定义（“/Pages/levelOne/levelOne.html”{
//每当用户导航到此页面时，都会调用此函数。它
//用应用程序的数据填充页面元素。
就绪：函数initiazlize（元素、选项）{
document.getElementById（“播放”）.addEventListener（“单击”，函数初始值）（）{
roundCount++；
如果（flag1==false）{
//如果flag1为false，则表示下一个情节提要的时间到了
j=0；
var r3=Math.random（）；
如果（r3），请创建一个提琴来更好地帮助你。看我的答案，它对你的问题很有价值。请创建一个提琴来更好地帮助你。看我的答案，它对你的问题很有价值
    (function () {
    "use strict";

    var appView = Windows.UI.ViewManagement.ApplicationView;
    var nav = WinJS.Navigation;

    WinJS.Namespace.define("Application", {
    PageControlNavigator: WinJS.Class.define(
        // Define the constructor function for the PageControlNavigator.
        function PageControlNavigator(element, options) {
            this._element = element || document.createElement("div");
            this._element.appendChild(this._createPageElement());

            this.home = options.home;
            this._lastViewstate = appView.value;

            nav.onnavigated = this._navigated.bind(this);
            window.onresize = this._resized.bind(this);

            document.body.onkeyup = this._keyupHandler.bind(this);
            document.body.onkeypress = this._keypressHandler.bind(this);
            document.body.onmspointerup = this._mspointerupHandler.bind(this);

            Application.navigator = this;
        }, {
            home: "",
            /// <field domElement="true" />
            _element: null,
            _lastNavigationPromise: WinJS.Promise.as(),
            _lastViewstate: 0,

            // This is the currently loaded Page object.
            pageControl: {
                get: function () { return this.pageElement && this.pageElement.winControl; }
            },

            // This is the root element of the current page.
            pageElement: {
                get: function () { return this._element.firstElementChild; }
            },

            // Creates a container for a new page to be loaded into.
            _createPageElement: function () {
                var element = document.createElement("div");
                element.style.width = "100%";
                element.style.height = "100%";
                return element;
            },

            // Retrieves a list of animation elements for the current page.
            // If the page does not define a list, animate the entire page.
            _getAnimationElements: function () {                                          //IHDAr
                if (this.pageControl && this.pageControl.getAnimationElements) {

                    return this.pageControl.getAnimationElements();

                }
                return this.pageElement;

            },

            // Navigates back whenever the backspace key is pressed and
            // not captured by an input field.
            _keypressHandler: function (args) {
                if (args.key === "Backspace") {
                    nav.back();
                }
            },

            // Navigates back or forward when alt + left or alt + right
            // key combinations are pressed.
            _keyupHandler: function (args) {
                if ((args.key === "Left" && args.altKey) || (args.key === "BrowserBack")) {
                    nav.back();
                } else if ((args.key === "Right" && args.altKey) || (args.key === "BrowserForward")) {
                    nav.forward();
                }
            },

            // This function responds to clicks to enable navigation using
            // back and forward mouse buttons.
            _mspointerupHandler: function (args) {
                if (args.button === 3) {
                    nav.back();
                } else if (args.button === 4) {
                    nav.forward();
                }
            },

            // Responds to navigation by adding new pages to the DOM.
            _navigated: function (args) {
                var newElement = this._createPageElement();
                var parentedComplete;
                var parented = new WinJS.Promise(function (c) { parentedComplete = c; });

                this._lastNavigationPromise.cancel();

                this._lastNavigationPromise = WinJS.Promise.timeout().then(function () {
                    return WinJS.UI.Pages.render(args.detail.location, newElement,args.detail.state, parented);
                }).then(function parentElement(control) {
                    var oldElement = this.pageElement;
                    if (oldElement.winControl && oldElement.winControl.unload) {
                        oldElement.winControl.unload();
                    }
                    this._element.appendChild(newElement);
                    this._element.removeChild(oldElement);
                    oldElement.innerText = "";
                    this._updateBackButton();

                    parentedComplete();
                    var history = args.detail.state;
                    WinJS.UI.Animation.enterPage(this._getAnimationElements()).done(
                        function () {

                        }
                        );//IDHAR

                }.bind(this));

                args.detail.setPromise(this._lastNavigationPromise);//IDHAR BHI
            },

            // Responds to resize events and call the updateLayout function
            // on the currently loaded page.
            _resized: function (args) {
                if (this.pageControl && this.pageControl.updateLayout) {
                    this.pageControl.updateLayout.call(this.pageControl, this.pageElement, appView.value, this._lastViewstate);
                }
                this._lastViewstate = appView.value;
            },

            // Updates the back button state. Called after navigation has
            // completed.
            _updateBackButton: function () {
                var backButton = this.pageElement.querySelector("header[role=banner] .win-backbutton");
                if (backButton) {
                    backButton.onclick = function () { nav.back(); };

                    if (nav.canGoBack) {
                        backButton.removeAttribute("disabled");
                    } else {
                        backButton.setAttribute("disabled", "disabled");
                    }
                }
            },
        }
    )
    });
    })();