jquery - using jscript to create greyscale to colour effect on images -

I am using the following technology to move my technique from Color to Grayscale on hover:

< P> The issue that continues to me is that when I hover the image, it goes back to the original size, rather than setting it in the width rather than setting it in the width rather than setting it in the width.

jscript code:

  & lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Script & gt; $ (Window) .log (function) ($ ('. Imglist img'). Each (function () {$ (this). Wrap ('& lt; div style = "display: inline-block; width:' + ('Position', 'Absolute'). Before Insert (this) (this). (This' 'px; height:' + this.height + 'px; "& gt;'); This.src = Grayscale (this.src);}). ({Obscurity: 1}, 500);}); $ (document) .ready (function () {$ ("# imglist1 a"). Hover (function () { $ (This) .find ('.colcolors'). Stop (). Animate ({opacity: 1}, 200);}, function () {$ (this) .find ('.colcolors'). Chetan ({Opacity: 0}, 500);});}); Function Scale (source) {var supportCanvas = !! document.cuccess element (' Canvas'); getContext; if (supports supports) {var canvas = document. CreateElement ('canvas'), reference = canvas. Gatecountx (' 2D '), image data, px, length, i = 0, gray , IMG = new image (); img.src = src; canvas.width = img.width; canvas.high = img.high; context.drawImage (img, 0, 0); imageData = context.getImageData (0, 0 , Canvas.wind, canvas.height); px = imageData.data; Length = px.length; For (; i & lt; length; i + = 4) {gray = px [i] * .3 + px [i + 1] * .59 + px [i + 2] * .11; PX [I] = PX [I + 1] = PX [I + 2] = Gray; } Context.putImageData (imageData, 0, 0); Return canvas.Tadata url (); } Else {return src; Window} / 60);};}) (); & Lt; / Script & gt;  

CS code:

  .imglist {margin: 0; Padding: 0; List-style: none; Margin: 0-15 px; Width: 100%; Display area; } .implist li {margin: 0 15 px; Swim left; } .implist {display: block} .imglist img {opacity: 0; }  

html code:

  
 gt; & Lt; A title = "This is me!" & Gt; & Lt; Img src = "picture / profile .jpeg" alt = "profile picture" style = "width: 100%;" & gt; & Lt; / A & gt; & Lt; / Li & gt;  

Any help or advice welcome is perhaps a better and easier way to do this? I originally tried to do this with CSS but was not very fortunate. Thank you.

Why do not you use CSS3? You can use the gray-scale filter with animation on hover like this ():

 . Animated-grayscale {-webkit-transition: all .5s ease; -MOZ-Infection: All .5s Easy; -MMS transition: all .5s ease; -O-Infection: All .5s ease; Transition: All .5s ease; Webkit-Filter: Grayscale (100%); -Move-Filter: Grayscale (100%); -M-filter: grayscale (100%); -o filter: grayscale (100%); Filters: grayscale (100%); Filter: URL (grayscale. SVG); / * Firefox 4+ * / filter: gray; / * IE 6-9 * Animated-grayscale: Hover (-bbkit-filter: grayscale (0%); -Moz-filter: grayscale (0%); -M-filter: grayscale (0%); -o filter: grayscale (0%); Filter: Grayscale (0%); Filter: None; }  

This removes grayscale on the hover, as you requested in the original question here is Bela -