Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript hover fading

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #32091
    Fourize
    Member

    I’m going on a whim here,

    but im looking for a little jquery that would allow one image to fade into another when hovered over and then stick as the new image.

    To explain a little I have a section of my website based on glasses/specs and want an image to be initially blurred and when hovered over it would come into focus. i’ve got the images designed etc. just wondered if it was possible with a little JS?

    #54610
    TheDoc
    Member

    Most certainly – you’d also be able to do it with some of the new CSS3 functions (with somewhat limited browser support, but workable enough fall backs).

    #54585
    TheLeggett
    Member

    Absolutely possible! You could go about doing this a number of ways depending on the exact effect you’re aiming for.

    You could stack two images with CSS, and fade out the top image on hover with jQuery.










    Here’s a demo: http://theleggett.com/explanations/unblur-hover/

    #54588
    TheLeggett
    Member

    One way to do that would be to use this:


    $(document).ready(function() {
    $(".image-container").hover(function() {
    $(this).children("img.blurred").fadeOut();
    }, function() {
    $(this).children("img.blurred").fadeIn();
    });
    });
    #54565
    TheLeggett
    Member

    The two immediate ways that come to mind are:

    1. Create a timer, and measure the length of the hover against the timer
    2. Use a neat jQuery plugin called hoverIntent.

    The first 2 answers to this question on StackOverflow do a good job offering solutions: http://stackoverflow.com/questions/435732/delay-jquery-hover-event#435760

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.