JQUERY fade效果
日期：2014-05-16 浏览次数：20444 次
JQUERY fade效果求助
下了个JQUERY的插件,对JQUERY了解不多.麻烦高手帮忙看下
是一个FADE效果的插件,如何给img添加链接而不影响其fade的效果,测试了好一会,加了链接之后他的fade效果就没有了.
Html代码-----------------------------------------------
CSS代码-----------------------------------------------
JS文件代码-----------------------------------------------
下了个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);
