evento flip on mouseenter no se detiene

ethereal_acs · #1 (**permalink**) 12/10/2011, 17:55

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>
<script type="text/javascript" src="script.js"></script>
 
</head>
 
<body>
 
<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>
            
            <div class="articulo_home_editorialData">
 
                <ul class="articulo_home_editorialURL">
                    <li><a href="seccion_editorial_articulo.html">Nombre del Articulo</a></li>
                </ul>
 
            </div>
        </div>

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