jQuery渐变动画

Question

I have this issue with my jquery plugin atm which is used alongside jquery mobile. I have an animate function which looks like this:

    animateWheel: function (self, speed, count) {
        var $item = $(self.settings.itemClass).first();
        var width = $item.outerWidth(true);

        $item.animate({ "left": "-" + width + "px" }, {
            duration: speed,
            easing: "linear",
            step: function (now, fx) {
                $(self.settings.itemClass + ":gt(0)").css("left", now);
            },
            complete: function () {
                self.moveItem(self, speed, count);
            }
        });
    },
    moveItem: function (self, speed, count) {
        if (count > 0) {
            var $item = $(self.settings.itemClass).first();
            $item.hide(speed, "linear", function () {
                $(this).appendTo(self.settings.itemContainerClass).show(speed, "linear");
                self.moveItem(self, speed, count - 1); // Repeat
            });
        }
    }

As you can see when animateWheel is called, it gets the first item and then animates it. The step function animates the rest of the items (there could be hundreds). This animation only happens once. When the animation is complete it calls moveItem which you can see moves the first item to the end of the array of elements and calls moveItem again until the counter is at 0. These all using the linear easing to make it looks smooth.

This all works fine and can be viewed at [url=http://www.r3plica.co.uk]Winner Select[/url] but my issue is that I want the animation to start slowly and then speed up and finally slow down and stop. To get a decent Idea, imagine wheel of fortune and that should give you an idea of what I am after. The problem is, I am unsure how to do this.

What I think needs to be done, is to alter the speed as the function ( moveItem ) is called starting from a low speed, then speeding up and finally slowing down to a stop.

My html looks like this:

<div data-role="page" id="carouselPage">

    <div data-role="header">
        <img src="assets/css/images/logo.jpg" />
    </div>

    <div data-role="content">
        <div id="carousel" class="carousel">
            <div class="carousel-container">

                <div class="carousel-item red">
                    <div class="carousel-photo">
                        <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
                    </div>
                    <div class="carousel-content ">
                        <p>Jaymie<br />Jeffrey</p>
                        <span class="twitter">
                            <p>@JaymieJeffrey</p>
                        </span>
                    </div>
                </div>

                <div class="carousel-item orange">
                    <div class="carousel-photo">
                        <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
                    </div>
                    <div class="carousel-content ">
                        <p>Jaymie<br />Jeffrey</p>
                        <span class="twitter">
                            <p>@JaymieJeffrey</p>
                        </span>
                    </div>
                </div>

                <div class="carousel-item green">
                    <div class="carousel-photo">
                        <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
                    </div>
                    <div class="carousel-content ">
                        <p>Jaymie<br />Jeffrey</p>
                        <span class="twitter">
                            <p>@JaymieJeffrey</p>
                        </span>
                    </div>
                </div>

                <div class="carousel-item navy">
                    <div class="carousel-photo">
                        <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
                    </div>
                    <div class="carousel-content ">
                        <p>Jaymie<br />Jeffrey</p>
                        <span class="twitter">
                            <p>@JaymieJeffrey</p>
                        </span>
                    </div>
                </div>

                <div class="carousel-item blue">
                    <div class="carousel-photo">
                        <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
                    </div>
                    <div class="carousel-content ">
                        <p>Jaymie<br />Jeffrey</p>
                        <span class="twitter">
                            <p>@JaymieJeffrey</p>
                        </span>
                    </div>
                </div>

                <div class="carousel-item teal">
                    <div class="carousel-photo">
                        <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
                    </div>
                    <div class="carousel-content ">
                        <p>Jaymie<br />Jeffrey</p>
                        <span class="twitter">
                            <p>@JaymieJeffrey</p>
                        </span>
                    </div>
                </div>

                <div class="carousel-item red">
                    <div class="carousel-photo">
                        <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
                    </div>
                    <div class="carousel-content ">
                        <p>Jaymie<br />Jeffrey</p>
                        <span class="twitter">
                            <p>@JaymieJeffrey</p>
                        </span>
                    </div>
                </div>

                <div class="carousel-item orange">
                    <div class="carousel-photo">
                        <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
                    </div>
                    <div class="carousel-content ">
                        <p>Jaymie<br />Jeffrey</p>
                        <span class="twitter">
                            <p>@JaymieJeffrey</p>
                        </span>
                    </div>
                </div>

                <div class="carousel-item green">
                    <div class="carousel-photo">
                        <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
                    </div>
                    <div class="carousel-content ">
                        <p>Jaymie<br />Jeffrey</p>
                        <span class="twitter">
                            <p>@JaymieJeffrey</p>
                        </span>
                    </div>
                </div>

                <div class="carousel-item navy">
                    <div class="carousel-photo">
                        <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
                    </div>
                    <div class="carousel-content ">
                        <p>Jaymie<br />Jeffrey</p>
                        <span class="twitter">
                            <p>@JaymieJeffrey</p>
                        </span>
                    </div>
                </div>

                <div class="carousel-item blue">
                    <div class="carousel-photo">
                        <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
                    </div>
                    <div class="carousel-content ">
                        <p>Jaymie<br />Jeffrey</p>
                        <span class="twitter">
                            <p>@JaymieJeffrey</p>
                        </span>
                    </div>
                </div>

                <div class="carousel-item teal">
                    <div class="carousel-photo">
                        <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
                    </div>
                    <div class="carousel-content ">
                        <p>Jaymie<br />Jeffrey</p>
                        <span class="twitter">
                            <p>@JaymieJeffrey</p>
                        </span>
                    </div>
                </div>

            </div>
        </div>


    </div><!-- /content -->

</div><!-- /page -->

If anyone can help, I would appreciate it :)

/r3plica

Update 1

I have now managed to get some sort of easing involved by doing this:

animateWheel: function (self, speed) {
    var $item = $(self.settings.itemClass).first();
    var width = $item.outerWidth(true);

    $item.animate({ "left": "-" + width + "px" }, {
        duration: speed,
        easing: "linear",
        step: function (now, fx) {
            $(self.settings.itemClass + ":gt(0)").css("left", now);
        },
        complete: function () {
            var random = Math.random() * 5;
            var duration = 1000 + Math.floor(1000 * random); // min: 1000, max: 6000

            $({ speed: 0 }).animate({ speed: 100 }, {
                duration: duration,
                easing: 'easeInBack', // can be anything
                step: function () { // called on every step
                    var $item = $(self.settings.itemClass).first();

                    $item.hide(Math.ceil(this.speed), "linear", function () {
                        $(this).appendTo(self.settings.itemContainerClass).show(this.speed, "linear");
                    });
                }
            });
        }
    });
}

You can see the results at http://www.r3plica.co.uk

Answer 1

Maybe try messing with different easing types here is a really useful cheat sheet I use.

http://easings.net/

I was thinking you would probably want something like easeInOutBack maybe?