暫停 animation 2 秒，然后自動在 jQuery 中恢復它，（不是鼠標懸停或鼠標懸停）？

Question

我有一個在 jQuery 中的滾動圖像，它滾動並且客戶的徽標出現在滾動框中，並且它會不停地滾動。 我可以增加和減少速度。 但是對於暫停然后在 2 秒內恢復 animation ，我無法做到我想要的。 這是我下載源代碼http://net.tutsplus.com/tutorials/javascript-ajax/building-a-jquery-image-scroller/的鏈接

                **The code in html file**

    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(function() {

          //remove js-disabled class
            $("#viewer").removeClass("js-disabled");

          //create new container for images
            $("<div>").attr("id", "container").css({ position:"absolute"}).width($(".wrapper").length * 170).height(170).appendTo("div#viewer");

            //add images to container
            $(".wrapper").each(function() {
                $(this).appendTo("div#container");
            });

            //work out duration of anim based on number of images (1 second for each image)
            var duration = $(".wrapper").length * 1000;

            //store speed for later (distance / time)
            var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration;

            //set direction
            var direction = "rtl";

            //set initial position and class based on direction
            (direction == "rtl") ? $("div#container").css("left", $("div#viewer").width()).addClass("rtl") : $("div#container").css("left", 0 - $("div#container").width()).addClass("ltr") ;

            //animator function
            var animator = function(el, time, dir) {

                //which direction to scroll
                if(dir == "rtl") {

                  //add direction class
                    el.removeClass("ltr").addClass("rtl");

                    //animate the el
                    el.animate({ left:"-" + el.width() + "px" }, time, "linear", function() {

                        //reset container position
                        $(this).css({ left:$("div#imageScroller").width(), right:"" });

                        //restart animation
                        animator($(this), duration, "rtl");

                        //hide controls if visible
                        ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;            

                    });
                } else {

                  //add direction class
                    el.removeClass("rtl").addClass("ltr");

                    //animate the el
                    el.animate({ left:$("div#viewer").width() + "px" }, time, "linear", function() {

                        //reset container position
                        $(this).css({ left:0 - $("div#container").width() });

                        //restart animation
                        animator($(this), duration, "ltr");

                        //hide controls if visible
                        ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;            
                    });
                }
            }

            //start anim
            animator($("div#container"), duration, direction);

            //pause on mouseover
            $("a.wrapper").live("mouseover", function() {

                //stop anim
                $("div#container").stop(true);

                //show controls
                ($("div#controls").length == 0) ? $("<div>").attr("id", "controls").appendTo("div#outerContainer").css({ opacity:0.7 }).slideDown("slow") : null ;
                ($("a#rtl").length == 0) ? $("<a>").attr({ id:"rtl", href:"#", title:"rtl" }).appendTo("#controls") : null ;
                ($("a#ltr").length == 0) ? $("<a>").attr({ id:"ltr", href:"#", title:"ltr" }).appendTo("#controls") : null ;

                //variable to hold trigger element
                var title = $(this).attr("title");

                //add p if doesn't exist, update it if it does
                ($("p#title").length == 0) ? $("<p>").attr("id", "title").text(title).appendTo("div#controls") : $("p#title").text(title) ;
            });

            //restart on mouseout
            $("a.wrapper").live("mouseout", function(e) {

                //hide controls if not hovering on them
                (e.relatedTarget == null) ? null : (e.relatedTarget.id != "controls") ? $("div#controls").slideUp("slow").remove() : null ;

                //work out total travel distance
                var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

                //work out distance left to travel
                var distanceLeft = ($("div#container").hasClass("ltr")) ? totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width())) : totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left")))) ;

                //new duration is distance left / speed)
                var newDuration = distanceLeft / speed;

                //restart anim
                animator($("div#container"), newDuration, $("div#container").attr("class"));

            });

            //handler for ltr button
            $("#ltr").live("click", function() {

                //stop anim
                $("div#container").stop(true);

                //swap class names
                $("div#container").removeClass("rtl").addClass("ltr");

                //work out total travel distance
                var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

                //work out remaining distance
                var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width()));

                //new duration is distance left / speed)
                var newDuration = distanceLeft / speed;

                //restart anim
                animator($("div#container"), newDuration, "ltr");
            });

            //handler for rtl button
            $("#rtl").live("click", function() {

                //stop anim
                $("div#container").stop(true);

                //swap class names
                $("div#container").removeClass("ltr").addClass("rtl");

                //work out total travel distance
                var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

                //work out remaining distance
                var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));

                //new duration is distance left / speed)
                var newDuration = distanceLeft / speed;

                //restart anim
                animator($("div#container"), newDuration, "rtl");
            });
        });
    </script>

Answer 1

您發布的示例中已經有代碼將停止和恢復 animation （ a.wrapper上的實時mouseover和mouseout事件處理程序）。

You should be able to take the required code out of those functions, and use it in combination with the jQuery delay function, or JavaScript's native setTimeout function to pause the animation for a specified amount of time.