¿Cómo deslizar automáticamente el div cuando se desplaza?

everyone who can help me change to auto slide 100px the div when mouse hover the link?

Mi código:

<!DOCTYPE html>
<html>
<head>

    <style> 

.left, .hidden {
    float: left;
    height:350px;
}

.left {
    width: 50%;
    background: #fff;
    z-index:1;
}

.hidden {
    width:7%;
    z-index:2;
    position:absolute;
    left:-1000px;
    background:grey;
    color:#000;
}


.clear {
    clear:both;
}


    </style>


     <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

</head>
<body>


<div class="hidden">Show Me</div>
<div class="left">Left panel</div>

<div class="clear"></div>

<a href="#" id="slide">Show/hide Slide Panel</a>

    <script>

    $(document).ready(function(){
    $('#slide').click(function(){
    var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"left":"0px"}, "slow").addClass('visible');
    }
    });
});

    </script>

</body>
</html>

Gracias por su atención.

preguntado el 12 de junio de 14 a las 11:06

2 Respuestas

use .hover instead .click

prueba este

    <script>

    $(document).ready(function(){
    $('#slide').hover(function(){
    var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"left":"0px"}, "slow").addClass('visible');
    }
    });
});

    </script>

Respondido el 12 de junio de 14 a las 11:06

Simplemente cambia

$('#slide').click(function(){

a

$('#slide').hover(function(){

Respondido el 12 de junio de 14 a las 11:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.