[SOLUCIONADO] finalizar transition CSS saltar al final

[matake]

Hola,
¿Alguien sabe como se puede saltar al final de una transition CSS?

he intentado esto y no funciona:

Código HTML:

<div id="contenedor">
Contenido
</div><br>
<button id="go">go</button>
<button id="go_end">go_end</button>
 

Código Javascript:

$('#go').off('click').on('click',function(){
        $('#contenedor').css({
                '-webkit-transition': 'transform 10000ms',
                'transform': 'translate(500px, 0px)'
        });
    });
    $('#go_end').off('click').on('click',function(){
        $('#contenedor').css({
                '-webkit-transition': 'transform 0ms',
                'transform': 'translate(500px, 0px)'
        });
    });
 

O sea necesito que al pulsar el botón go_end ... el contenedor se vaya a la posición final
en este caso a 500px sin esperar la duración puesta al principio (10 segundos )
También estoy obligado (por la naturaleza del proyecto) de utilizar jquery o javascript para cambiar el atributo style. No puedo hacerlo por las etiquetas <style> con clases

Gracias

[AngelKrak]

Solo Cambia tu 'transform': 'translate(500px, 0px)' por 'transform': 'translateY(500px)'

Demo:
http://jsfiddle.net/pLnhkqax/

[matake]

Gracias por responder,
He probado tu fiddle y a mi no mefunciona.
No se si no funciona por culpa de mi navegador ( he probado con chrome 40 y explorer 10 para explorer he cambiado el prefijo -webkit- por -ms- )

o no has entendido bien lo que quiero.

El cambio que me sugieras es que en vez de horizontal se mueve vertical
Esto seria lo de menos ya que solo es un ejemplo

Lo que quiero es que al pulsar el primer botón (go) la transicion empieza ( y lo hace ) pero antes de terminar la transicion ( supongando que de los 500px ha llegado a 200px y le queda todavía 300px por moverse ... por esto puse 10 segundos de retraso )
Entonces al pulsar el segundo botón (go_end) quiero que el contenedor se vaya directamente a 500px y no esperar que termine la primera transicion que esta todavia sin terminar.


Pulsar el primer boton (go) y despues de 1-2-3 segundos pulsar el segundo boton ( go end )
O sea no pulsar el segundo boton ( go_end ) en primer lugar que asi claro que funciona pero no es esto lo que quiero.

No se si me has entendido

Gracias de todos modos

[pzin]

Puedes usar SetTimeout, ¿no?

[matake]

Hola pzin no veo el sentido del setTimeout aquí.

¿como lo emplearías tu ?

De momento la unica chapuza que he conseguido que funcione es esta:

Código Javascript:

//copio el contenido del atributo style y quito -webkit-transition: transform 10000ms; con replace
 
        var estilo_nuevo = $('#contenedor').attr('style').replace(/-webkit-transition: transform 10000ms;/,'');
 
                //aquy otra chapuza porque el regex anterior solo me quitaba el -webkit-
        estilo_nuevo = estilo_nuevo.replace(/transition: transform 10000ms;/,'');
 
                //pongo el nuevo estilo .... pero ojo solo funciona si previamente he borrado el contenido del atributo style sobrescribir directamente ej : $('#contenedor').attr('style',estilo_nuevo); No funciona !
        $('#contenedor').attr('style','').attr('style',estilo_nuevo);
 

lo pongo como solucionado aunque queda como una chapuza
aquy va el ejemplo
http://jsfiddle.net/matake/yjy22sd7/