CODEWITHSUNDEEP
jqueryhtmlcss
easy rider
easy rider

Reputation: 192

Sliding div stops and goes further

I have two divs on top of eachother. One div (gray one) is sliding in from the top over the other one (black one).

When you place your mouse over the black div the gray one slides out of view.

When you place your mouse over the gray div the gray one slides out of view also but it stops for a moment when the mouse is at the bottom of that div and than goes further.

Here is the html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script src="js/jquery-1.6.4.js" type="text/javascript"></script>    

<link rel="stylesheet" type="text/css" href="css/logo.css"> 

<script>
$(document).ready(function(){
$(".carosel,.logo").hover(function(){
    $('.logo').stop().animate({'top': '-150px'}, 1000);
}, function(){
    $('.logo').stop().animate({'top': '0px'}, 1000);
});
});
</script> 

<script>
$(function(){  // $(document).ready shorthand
$('.logo').hide().delay(1000).show().animate({'top': "0px"}, 1000);
}); 
</script> 

</head>

<body>

<div class="container">
<div class="carosel"> </div>
<div class="logo"> bla bla mekker mekker </div>
</div>

</body>

</html>

Here is the css

.container {
height: 800px;
width: 800px;
margin-left: auto;
margin-right: auto; 
background-color: red;
}

.logo {
height: 150px;
width: 800px;
color: #FFFFFF;
background-color: #000000;
position:absolute;
top:-150px; 
}

.carosel {
height: 250px;
width: 800px;
background-color: #202020;
position:absolute;
top:0px;
}

As you can see I am new at jQuery so I hope you guys can help me with this one.

Upvotes: 4

Views: 135

Answers (2)

Nunners
Nunners

Reputation: 3047

I believe this is the Solution you are wanting : Example JSFiddle

To get this to work you will need to update your jQuery Version to 1.8.3 (for the always callback function of the Animate function)

(Avoid 1.9.1 as the following check will break !$(".carosel").is(":hover") && !$(".logo").is(":hover"). This is due to a Bug that was corrected again in jQuery 1.10.1)

Here is the example code : 

var hideRunning = false;

$(document).ready(function(){
    $(".carosel").hover(function() {
        if (!hideRunning) {
            hideRunning = true;
            $('.logo').stop().animate({'top': '-150px'}, {
                duration:1000,
                always:function() {
                    hideRunning = false;
                }
            });
        }
    }, function() {
        if (!$(".carosel").is(":hover") && !$(".logo").is(":hover")) {
                $('.logo').stop().animate({'top': '0px'}, 1000);
        }
    });
});

$(function(){  // $(document).ready shorthand
    $('.logo').hide().delay(1000).show().animate({'top': "0px"}, 1000);
});

Now when you hover over either div, it checks to see if the animation is currently running, if it is then it will not call the .stop().animate() again.

Also when you hover-out of a div it will check if the either div is currently hovered, if they are then it will not call the .stop().animate() again.

This is simply removing duplicate calls to the .stop() function.

Upvotes: 0

user1477388
user1477388

Reputation: 21430

What you need to do is put the .logo in the .carousel. See my update and you will find no 'shuttering'.

<div class="carosel">
     <div class="logo">bla bla mekker mekker</div>
 </div>

JS:

$(document).ready(function(){
    $(".carosel").hover(function(){
        $('.logo').stop().animate({'top': '-150px'}, 1000);
    }, function(){
        $('.logo').stop().animate({'top': '0px'}, 1000);
    });
    $('.logo').hide().delay(1000).show().animate({'top': "0px"}, 1000);
});

http://jsfiddle.net/vFJ27/6/

Upvotes: 1

Related Questions