当前位置: 代码迷 >> JavaScript >> JQUERY fade效果
  详细解决方案

JQUERY fade效果

热度:188   发布时间:2013-06-26 14:29:32.0
JQUERY fade效果求助
本帖最后由 walunwine2 于 2013-06-04 13:30:20 编辑
下了个JQUERY的插件,对JQUERY了解不多.麻烦高手帮忙看下
是一个FADE效果的插件,如何给img添加链接而不影响其fade的效果,测试了好一会,加了链接之后他的fade效果就没有了.
Html代码-----------------------------------------------

<script type="text/javascript">  
$().ready(function() {
$('.jfade_image').jfade();
$('.portfolio').jfade({
start_opacity: ".4",
high_opacity: "1",
low_opacity: ".2",
timing: "500"
});
   
});  
</script>
<div id="wrapper">
<div id="images">
<a href="/"><img src="images/card02.jpg" border="0" class="jfade_image"/></a>
<img src="images/card04.jpg" class="jfade_image"/>
<img src="images/card09.jpg" class="jfade_image"/>
<img src="images/card13.jpg" class="jfade_image"/>
<img src="images/card14.jpg" class="jfade_image"/>
<img src="images/card15.jpg" class="jfade_image"/>
<img src="images/card16.jpg" class="jfade_image"/>
<img src="images/card17.jpg" class="jfade_image"/> </div>
</div>

CSS代码-----------------------------------------------
body { background: #000000; }
#wrapper{margin: 0 auto; width: 900px;}
#images {margin: 0 auto; width: 600px; height: 220px; float:none; margin-bottom: 20px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border:1px solid rgba(200,200,200,0.4);}
.jfade_image, .portfolio {width: 120px; margin: 15px; float:left;}

  

JS文件代码-----------------------------------------------
$(function($) {
$.fn.jfade = function(settings) {
var defaults = {
start_opacity: "1",
high_opacity: "1",
low_opacity: ".1",
timing: "500"
};
var settings = $.extend(defaults, settings);
settings.element = $(this);

//set opacity to start
$(settings.element).css("opacity",settings.start_opacity);
//mouse over
$(settings.element).hover(

//mouse in
function () {   
$(this).stop().animate({opacity: settings.high_opacity}, settings.timing); //100% opacity for hovered object
$(this).siblings().stop().animate({opacity: settings.low_opacity}, settings.timing); //dimmed opacity for other objects
},
//mouse out
function () {
$(this).stop().animate({opacity: settings.start_opacity}, settings.timing); //return hovered object to start opacity
$(this).siblings().stop().animate({opacity: settings.start_opacity}, settings.timing); // return other objects to start opacity
}
);
return this;
}

})(jQuery);
  相关解决方案