CODEWITHSUNDEEP
javascriptjqueryhtmljquery-animatetoggle
user3357774
user3357774

Reputation: 3

Slide Out on Hover?

$(document).ready(function() {
  $("#slide").delay(5000).animate({right: 0}, 500);
});
#slide {
  position: absolute;
  right: -155px; overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide"><img src="pic.jpg"></div>

Right now my code is working with a delay of 5 seconds then the photo slides out from the right side. I need to change this so it stays in the "right:-155" position until you hover over the image. Once you hover it should slide out to "0" and hold it there for about 6 seconds. If the user moves the mouse off it should just go back to the original position.

Can anyone help me?

Upvotes: 0

Views: 1041

Answers (2)

Alex
Alex

Reputation: 9041

Bit late to the game, and I see you already have a "working" answer, however, think this works slightly better:

$('#slide').hover(function () {
    $(this).stop( true, true ).animate({right: 0}, 500);
    timeout = window.setTimeout(function(){
        $('#slide').trigger('mouseleave');        
    }, 5000);
},function(){
    window.clearTimeout(timeout);
    $(this).animate({right: -500}, 500);  
});

Here it is in action - http://jsfiddle.net/w7ybb/

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

Try:

$(document).ready(function () {
    $("#slide").hover(function (e) {
        $(this).stop().delay(5000).animate({
            right: e.type === "mouseenter" ? 0 : "-155px"
        }, 500);
    });
});

Or better toggle some class.

Upvotes: 1

Related Questions