jquery hover image fade swap -
I've been searching online for some time, it does an easy job to find the best way to write jquery scripts Trying: Swapping with a beautiful fade effect, an image on hinge has found many solutions (some way to unwind and friction), and I see it as two things below:
For the purposes of me, I do this hover swap several times on the same page I want to be able. Page I currently mesh on my "Services NAV" (different types of hinge), but I want to apply them with all the NAV buttons along with social icons in the footer. All latters will have one or two image files, which will rotate each other and return to the holiday. What is the best way to go about this? Perhaps one of the above links probably?
You can also use a single background image, and fading in & amp; A transparent div out Here is a quick example, which can be extended to work automatically for a single class image:
$ (document) .ready (function () {$ ("# Mask-div") CSS ({"status": "absolute", "width": 275, "height": 110, "background": "RGBA (255, 255, 255, 0.5)"}). Mouseover can be seen on jsbin: update: here There is a more general solution (incomplete but shows some ideas): Add any image to the "Feed-IMG" category, which you want this effect.
$ (document) .ready (function () {$ (".fade-img") First ("& lt; div class = 'fade-div' '& gt; & lt; / div & gt;") .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");} );});
Comments
Post a Comment