Rotar imagen (es) OnClick con jQuery?

tengo este código: http://jsfiddle.net/Q4PUw/2/Rotar imagen (es) OnClick con jQuery?

Por lo tanto, un simple secreto al VISIBLE script jQuery.

Lo que quiero saber cómo hacer es tener una imagen en la clase "expand-one" que rotaría 90 grados para que la imagen esté boca abajo mientras esa clase sea VISIBLE, y una vez que esté oculta giraría regreso a su lugar original.

¿Alguna idea (s) alguien?

¡Muchas gracias! Aaron

Fuente

2011-12-13 Aaron Brewer

Usted puede hacer esto con CSS: http://jsfiddle.net/Tentonaxe/Q4PUw/6/

$('.expand-one').toggle(function() { 
    $('.content-one').slideDown('slow'); 
    $(this).find("img").css({ 
     "-webkit-transform": "rotate(180deg)", 
     "-moz-transform": "rotate(180deg)", 
     "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)" 
    }); 
}, function() { 
    $('.content-one').slideUp('slow'); 
    $(this).find("img").css({ 
     "-webkit-transform": "rotate(0deg)", 
     "-moz-transform": "rotate(0deg)", 
     "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)" 
    }); 
});

Fuente

2011-12-13 20:35:59

en ese violín, la imagen es ya no está en expand-one. –

Aquí está el violín actualizado con la dom en su último violín: http://jsfiddle.net/Tentonaxe/Q4PUw/8/ –

Gracias, ahora estoy tratando de obtener un efecto de animación para la rotación. Sabía que ibas a estar en lo cierto =). Te he notado recientemente y tus respuestas siempre parecen ser acertadas. – mrtsherman

Usted puede hacer eso con HTML plano (que es imposible tener desvanecimiento de ultra lenta):

<details> 
<summary>Click Here To Display The Content</summary> 
Hidden Content here, can be rotated with CSS3 
</details>

Fuente

2011-12-13 21:33:36 juancarlospaco

Rotar imagen (es) OnClick con jQuery?

Respuesta

Cuestiones relacionadas