jquery fade in fade out priority

Question

I have recently posted about a hover effect with hover.

It now works ok, but I was wondering if there is a way to prioritise the effect. For example, if the user goes through a sequence of image rollovers quickly it takes a while for the animation to catch up. I don't mind the animations continuing, but I would like the item that is currently being hovered over to fadein immediately.

Here is my code at the moment:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<title>Robs Test</title>
<style>
body{background:gray;}
div{position:relative;}
.box{
    position:relative;
    width:150px;
    height:150px;
    float:left;
    display:block;
    background:black;
    margin-right:20px;
}
.boxover{
    position:absolute;
    top:10px;
    left:0px;
    width:100%;
    height:20px;
    z-index:100;
    background:white;
    display:none;
}
</style>
<script type="text/javascript">
    $(function(){
        $('.box').hover(over, out);
    });


    function over(event){
        var over_id = '#box_over_' + $(this).attr('id').replace('over_','');

        $(over_id).fadeIn(400);
        $(over_id).css("display","normal");

    }
    function out(event) {
        var over_id = '#box_over_' + $(this).attr('id').replace('over_','');

        $(over_id).fadeOut(400);

    }

</script>

</head>

<body>
<a href="#" class="box" id="over_1"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_1" class="boxover">hello</div></a>
<a href="#" class="box" id="over_2"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_2" class="boxover">there</div></a>
<a href="#" class="box" id="over_3"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_3" class="boxover">rob</div></a>


</body>

</html>

Is there something I can do to make the div that's being hovered over prioristise over the others? So I don't have to wait till the animation completes.

Cheers

Rob

score 1 · Answer 1 · answered Dec 20 '11 at 18:05

1

You can use stop function in jQuery to make it better. It will stop the animation in progress.

function over(event){
    var over_id = '#box_over_' + $(this).attr('id').replace('over_','');

    $(over_id).stop(true, true).fadeIn(400);
    $(over_id).css("display","normal");

}
function out(event) {
    var over_id = '#box_over_' + $(this).attr('id').replace('over_','');

    $(over_id).stop(true, true).fadeOut(400);

}

answered Dec 20 '11 at 18:05

Diode

23,400
8
39
50

perfect my friend :) exactly what I wanted :) – Robert Shillito Dec 20 '11 at 18:10

score 0 · Answer 2 · edited May 23 '17 at 12:03

0

I would only trigger the animations (especially if they are long) if the user hovers over the image for set threshold amount of time (not on every rollover).

See related post on implementing controlled hover.

edited May 23 '17 at 12:03

Community

1
1

answered Dec 20 '11 at 18:02

SliverNinja - MSFT

30,055
11
102
166

ah, ok, how would i do that in jquery? – Robert Shillito Dec 20 '11 at 18:04
@RobertShillito - see link above. Essentially using timeouts and jQuery data attribute to track clicks. Alternate solutions are also suggested. – SliverNinja - MSFT Dec 20 '11 at 18:07

score 0 · Answer 3 · answered Dec 20 '11 at 18:31

Related to what @SliverNinja linked to, specifically for your scenario:

function over(event) {
    var $this = $(this);
    $this.data('hoverTimer', setTimeout(function(){
        timer = null;
        var over_id = '#box_over_' + $this.attr('id').replace('over_', '');

        $(over_id).fadeIn(400);
        $(over_id).css("display", "normal");
    }, 200));
}

function out(event) {
    var timer = $(this).data('hoverTimer');

    if (timer !== null) {
        clearTimeout(timer);   
    }
    var over_id = '#box_over_' + $(this).attr('id').replace('over_', '');

    $(over_id).fadeOut(400);
}

Here's the fiddle: http://jsfiddle.net/9RR93/

jquery fade in fade out priority

3 Answers3