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.

$('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

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.

$('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

• javascript
• jquery
• translate-animation

• 4 Show us the relevant part of the code you have so far. :) – vdbuilder Commented May 17, 2012 at 5:26
• showing you html and css will help us the serve you better.. – Murtaza Commented May 17, 2012 at 5:40
• Have a peek at the js fiddle I posted. I'd highly, highly remend establishing a CSS rule to manage the webkit-transform states, rather than manually adding CSS to the attributes style attribute. It will be much more maintainable. – Matt H. Commented May 17, 2012 at 5:49

3 Answers 3

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/fvgaK/5/

[Edit: updated to make it ie-patible]

You can do using CSS3. But It doesn't run on all browser.

You can take advantage of informations here. http://www.w3/TR/css3-2d-transforms/

Also You can do this way.

.rotate {
    -webkit-transform: rotate(30deg); /* safari and chrome */
    -moz-transform: rotate(30deg);/*firefox browsers */
    transform: rotate(30deg);/*other */
    -ms-transform:rotate(30deg); /* Internet Explorer 9 */
    -o-transform:rotate(30deg); /* Opera */
}

http://jsfiddle/jJdxc/

EDIT:

I saw this javascript plugin while I was searching on internet. It is very useful for translate process.

http://fabricjs./

http://fabricjs./kitchensink/

To solve the blinking / janking thing that might be going on you can try setting the css property backface-visibilityto hidden on the animated element(s).

In your case:

#myVid {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

this solved my issues with "blinking" elements.

more info: https://developer.mozilla/en-US/docs/Web/CSS/backface-visibility