Geek Answers Handbook

JQuery hover image

I searched online for a while trying to find a better way to write a jquery script that accomplishes this simple task: minimize image on hover with an elegant fade effect. I found many solutions (somehow bulky and awkward) and narrowed it down to what I consider the two best:

http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

For my purposes, I want to be able to do this swover hover several times on the same page. Page http://www.vitaminjdesign.com . Currently, I have hangs in my “nav service” (another type of hover), but I want to apply them to all navigation buttons, as well as to social icons in the footer. All the freezes will be the same - two image files, one fades in the other on the freeze and returns on vacation. What is the best way to do this? Perhaps one of the above links?

+5
source share
5 answers

, , div. , , :

$(document).ready( function() {
    $("#mask-div")
        .css({
          "position": "absolute",
          "width": 275,
          "height": 110,
          "background": "rgba(255, 255, 255, 0.5)"
        })
        .mouseover( function() {
             $(this).fadeOut("slow");
        })
    ;
    $("#test-img").mouseout( function() {
        $("#mask-div").fadeIn("slow");
    });
});

jsbin: demo-one

UPDATE: (, ): demo-two. "fade-img" , .

$(document).ready( function() { 
    $(".fade-img") 
        .before("<div class='fade-div'></div>") 
        .each( function() { 
            var img = $(this); 
            var prev = img.prev(); 
            var pos = img.offset(); 

            prev.css({ "height": img.height(), "width": img.width(), "top": pos.top, "left": pos.left }) 
                .mouseover( function() { 
                    $(this).fadeOut("slow"); 
                } 
            ); 
        }) 
        .mouseout( function() { 
            $(this).prev().fadeIn("slow"); 
        }) 
    ; 
});
+6

, . , .

  • <img>
  • (CSS z-index)
  • z-index 0
  • ,
  • , 1.

+4

$(document).ready()

$('.imgbuttonclass').hover(function(){
    $(this).animate({
        backgroundImage: 'img2.png'
    },500);
},function(){
    $(this).stop(true).animate({
        backgroundImage: 'img1.png'
    },500);
});

: http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

jthompson . , :

http://peps.ca/blog/easy-image-rollover-script-with-jquery/

,

"img" "input" "". , , "_o" . , "image.gif" "Image_o.gif". , script "mouseover" "mouseout".

+1

I think this is the best method because it uses CSS Sprites to achieve the effect. The tutorial and demo illustrate how to achieve this using CSS3 as well as jQuery. Take a look below:

http://css-tricks.com/fade-image-within-sprite/

+1
source

More articles:


All Articles