(function($) { var _options = new Array(); var _itemId = 0; jQuery.fn.MyFadeOverImage = function(options) { _options[_options.length] = $.extend({}, $.fn.MyFadeOverImage.defaults, options); var idx = _options.length-1; var opt = _options[idx]; $(this).each(function(){ $(this).attr("idx", idx); $(this).fadeTo("fast", opt.normalAlpha); $(this).wrap("<DIV class=tongBg></DIV>"); $(this).parent().css("background", opt.normalToneColor); $(this).parent().css("width", opt.imageWidth+"px"); $(this).parent().css("height", opt.imageHeight+"px"); }).mouseenter(function(){ $(this).stop(); $(this).fadeTo(_options[idx].fadeInSpeed, _options[idx].hoverAlpha); }).mouseout(function(){ $(this).stop(); $(this).fadeTo(_options[idx].fadeOutSpeed, _options[idx].normalAlpha); }); } jQuery.fn.MyFadeOverImage.defaults = { normalAlpha:0.8, hoverAlpha: 1, normalToneColor:"#000", fadeInSpeed: "1000", fadeOutSpeed: "1000" }; })(jQuery); $("div.demo01 img").MyFadeOverImage({ normalAlpha:0.5, hoverAlpha: 1, normalToneColor:"#cbf5f5" }); $("div.demo02 img").MyFadeOverImage({ normalAlpha:0.3, hoverAlpha: 1, normalToneColor:"#cece8c" }); $("div.demo03 img").MyFadeOverImage({ normalAlpha:0.5, hoverAlpha: 1, normalToneColor:"#ce8c8c" }); $("div.demo04 img").MyFadeOverImage({ normalAlpha:0.6, hoverAlpha: 1, normalToneColor:"#ff8040" });
.demoImgDiv , .tongBg { margin:5px; } .demoImgDiv { padding-left:40px; } .demo{margin-bottom:20px;clear:both;} .tongBg { background:#000; float:left; } img { border:0px; cursor:pointer; width:150px; }
<a href="http://www.behance.net/gallery/s-e-n-s-u-a-l/222089">Photo by Joanna Kustra</a> CC-BY <div class="demo01 demo"> <img src="http://behance.vo.llnwd.net/profiles/89560/projects/222089/895601241627435.jpg"> <img src="http://behance.vo.llnwd.net/profiles/89560/projects/222089/895601241627453.jpg"> <img src="http://behance.vo.llnwd.net/profiles/89560/projects/222089/895601241627470.jpg"> </div> <div class="demo02 demo"> <img src="http://behance.vo.llnwd.net/profiles/89560/projects/222089/895601241627435.jpg"> <img src="http://behance.vo.llnwd.net/profiles/89560/projects/222089/895601241627453.jpg"> <img src="http://behance.vo.llnwd.net/profiles/89560/projects/222089/895601241627470.jpg"> </div> <div class="demo03 demo"> <img src="http://behance.vo.llnwd.net/profiles/89560/projects/222089/895601241627435.jpg"> <img src="http://behance.vo.llnwd.net/profiles/89560/projects/222089/895601241627453.jpg"> <img src="http://behance.vo.llnwd.net/profiles/89560/projects/222089/895601241627470.jpg"> </div> <div class="demo04 demo"> <img src="http://behance.vo.llnwd.net/profiles/89560/projects/222089/895601241627435.jpg"> <img src="http://behance.vo.llnwd.net/profiles/89560/projects/222089/895601241627453.jpg"> <img src="http://behance.vo.llnwd.net/profiles/89560/projects/222089/895601241627470.jpg"> </div>