translate div on click

Question

I need to have a div move out on a click, and them move back in on a second event that it's binded to. Now, this works just fine, but only the first time. It needs to be able to occur over and over on multiple clicks.

The way to do this seems to be with translate but it's all on Css, which doesn't like click. (I've tried, and it's not working).Can anyone point me to a site that can explain how, or just help me out themselves? Thanksedit: okay, here's the script...

$('li, .thumbs').on('click', function() {
        $("#myVid").css("-webkit-transform","translate(-2070px, 0px)");
                //click plays a video
//some stuff happens
$('#myVid').bind("playing", function() {
        $("#myVid").css("-webkit-transform","translate(0px, 0px)");

that's really all that's actually relevant to the issue... **Edit: so, I changed it to CSS addClass and removeClassthis is the current script

$('li, .thumbs').on('click', function() {
        $("#myVid").addClass('move');
//stuff happens
$('#myVid').bind("playing", function() {
        $("#myVid").removeClass('move');

and then the CSS

.move {
    -webkit-transform: translateX(2000px);
}

but while it works, it blinks alot

Answer 1

I just churned out this jsfiddle... hopefully it helps.

I like to add a CSS class to elements that need to be changed (or a parent element to trigger a whole set of changes).

In the example, by just adding & removing the "moved" class to my div, it will adjust the necessary space.

http://jsfiddle.net/fvgaK/5/

[Edit: updated to make it ie-compatible]