hola a todos..
tengo un div . y quiero que al pasar el mouse o colocarme en el . haga una animación flip. que de un lado aparece una imagen y del otro lado texto.
ahora lo que ocurre es q es facil disparandolo con un link o boton . pero quiero q ocurra dentro del mismo div..
bsucando en internet encontre una opcion mas o menos tengo esto:
Código HTML:
Ver original<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript" src="jquery.flip.min.js"></script>
<div id="main_articulos">
<div class="articulo_editorial">
<div class="articulo_home_editorial" title="nombre del articulo"> <div class="articulo_home_editorialFlip"> <img src="img/articulos/1.png" alt="Nombre Articulo" />
<div class="articulo_home_editorialData">
<ul class="articulo_home_editorialURL"> <li><a href="seccion_editorial_articulo.html">Nombre del Articulo
</a></li>
y en mi lado de javascript tengo esto :
Código Javascript
:
Ver original$(document).ready(function(){
/*Marco A. Carrasco 12/oct/2011
Este Jquery Script rota un objeto div*/
$('.articulo_home_editorialFlip').bind("mouseenter",function(){
var elem = $(this);
if(elem.data('flipped'))
{
elem.revertFlip();
elem.data('flipped',false)
}
else
{
elem.flip({
direction:'lr',
speed: 350,
onBefore: function(){
elem.html(elem.siblings('.articulo_home_editorialData').html());
}
});
// Setting the flag:
elem.data('flipped',true);
}
});
});
lo que ocurre es que al pasar el mouse sobre mi div.. y moverlo un poco se vuelve a activar todo y de nuevo hace el flip.
quisiera que estuviera mi imagen de un lado . pasara el mouse y se volteara a la seccion de texto.. y que se quedara ahi hasta q salga del div. y regresara a la imagen
espero explicarme .. saludos