Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hover problem, seeing two divs at once

    My basic set up is that I have some divs which I want to fade in and out when the user hovers over an image.

    Code:
    <div id="DefaultHint" >The default hint is in here, shown initially</div>
    <div id="PPHint" style="display:none" >There is a different hint here, hidden initially</div>
    Here is the code I have so far:

    $('#QmarkCOP').hover(
    function(event){
    $('#DefaultHint').fadeOut('fast', function(){
    $('#PPHint').fadeIn('fast');
    })
    },
    function(event){
    $('#PPHint').fadeOut('fast', function(){
    $('#DefaultHint').fadeIn('fast');
    });
    }
    );
    Now this works ok except for when I move in and out of the image (QmarkCOP) too fast. Then I see both hints at once.

    Any ideas how I can prevent this from happening?

    Thanks for any help.

  • #2
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    try this instead

    $('#QmarkCOP').hover(
    function(){
    $('#DefaultHint').fadeOut('fast');
    $('#PPHint').fadeIn('fast');
    },
    function(){
    $('#DefaultHint').fadeIn('fast');
    $('#PPHint').fadeOut('fast');
    }
    );

  • #3
    New Coder
    Join Date
    Jul 2010
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nope, that makes it a little different but now I see both hints at once for a millisecond on the transition as well as when I hover in and out too fast!

  • #4
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Left_blank View Post
    Nope, that makes it a little different but now I see both hints at once for a millisecond on the transition as well as when I hover in and out too fast!

    because your making it to fadeIn Fadeout fast make it.. fadeIn('slow'); and fadeOut('slow')

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I suspect the problem with your original code is because when you move the mouse in and out quickly, the hoverIn fade has not completed before the hoverOut fade starts - resulting in both divs being visible.

    Adding stop() as below seems to cure the problem.

    Code:
    $('#QmarkCOP').hover(
    function(){
    $('#PPHint').stop('true','true');
    $('#DefaultHint').fadeOut('fast', function(){
    $('#PPHint').fadeIn('fast');
    })
    },
    function(){
    $('#DefaultHint').stop('true','true');
    $('#PPHint').fadeOut('fast', function(){
    $('#DefaultHint').fadeIn('fast');
    });
    }
    )
    Interested in any alternative solutions.

  • #6
    New Coder
    Join Date
    Jul 2010
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Edit: I got ninja replied on by SB65. This post is supposed to go just above his!


    That doesn't fix it either I'm afraid. The problem is that there's nothing preventing the mouseout function from running at the same time as the mousein function when I move the mouse in and out of the image quickly. When both functions run at the same time, I see both hints at the same time.

    So what I think I need to do is check if the mousein function is finished before I run the mouseout function somehow?
    Last edited by Left_blank; 08-19-2010 at 02:22 PM.

  • #7
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts
    not sure of exactly how the code would go, but i'd suggest using .mouseenter or .mouseover rather than .hover. Not sure which one though...

    Take a look at this:
    http://api.jquery.com/mouseover/

  • #8
    New Coder
    Join Date
    Jul 2010
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @ SB65,

    That does ease the problem somewhat but it doesn't eradicate it. When I flash the cursor back and forth over the image quickly I still see both divs at once sometimes. There are also instances of the functions being queued up in memory so if I flash over a lot of times and then move the mouse away there is still animations going on.

    I'd guess I can add some sort of timer to the function so that nothing happens unless there is hover for a certain length of milliseconds. I'll try that and let you know how I get on.

    Thanks.

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    This plugin looks like it might help you out.

  • #10
    New Coder
    Join Date
    Jul 2010
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That looks like exactly what I'm looking for. I'll have a play around with it now in a minute.

    Thus is as close as I got myself.

    Code:
    function doFade(fadeoutfield, fadeinfield){ //2
    		$(fadeoutfield).fadeOut('fast', function(){ //1
    			$(fadeinfield).fadeIn('fast');
    		}) //1
    	}
    
    $('#QmarkCOP').mouseenter(function(event){
    		TimerId = setTimeout ( "doFade('#DefaultHint', '#PPHint')", 500 )
    	});
    	
    	$('#QmarkCOP').mouseleave(function(event){
    		$('#DefaultHint').stop('true','true');
    		if($('#PPHint').is(":visible")){
    			doFade('#PPHint', '#DefaultHint')
    		}
    		else {
    			clearTimeout(TimerId)
    		}
    	});
    It's pretty hard to break this one unless you really try but it's not a perfect solution.

  • #11
    New Coder
    Join Date
    Jul 2010
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yep that works perfectly SB. Excellent find. Thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •