jQuery call CSS3 version of stop(true,false) and animate from event?

问题

Can anyone show me how to use CSS3 to do this?

http://jsfiddle.net/dYYZP/65/

I've been trying to figure out how to call CSS3 transitions via events and stopping transitions like jQuery's stop(true, false) for months.

<div id="outer"></div>
<div id="inner"></div>

var under = true;
$("#outer").bind({
    click : function() {
        if(under){
            $("#inner").stop(true, false).animate( {
                left: 50
            }, 500);
        }
        else{
            $("#inner").stop(true, false).animate( {
                left: -50
            }, 500);    
        }
        under = !under;
    }
});

回答1:

http://jsfiddle.net/dYYZP/81 (note that I only included -webkit for convenience).

The CSS 2D transform translate can be used to move an element along the X/Y axis. This, with a combination of CSS3 transitions, allows for a similar animation.

If you wanted to do this purely with CSS, then you would have to make the red box a <label> for checkbox element and then have a selector like :checked + .slideout that would include the translate rule.

There is no way to stop CSS transitions during animation; only once the animation is complete (by removing the rule).

回答2:

Is this what you want to do?

I just added below code to your #inner's css:

transition:left .5s;
-moz-transition:left .5s;
-webkit-transition:left .5s;

Hope it helps.

来源：https://stackoverflow.com/questions/14312849/jquery-call-css3-version-of-stoptrue-false-and-animate-from-event