您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > jQuery > jQuery特效 > jQuery选项卡特效 > 正文

jQuery选项卡淡出淡入菜单更换内容

2014-01-21 02:01:05 作者:天外飞仙 人气:2027 Views

jQuery选项卡淡出淡入菜单更换内容
jQuery选项卡淡出淡入菜单更换内容

部分jQ代码

$(function(){ $("#about-button").css({ opacity: 0.3 }); $("#contact-button").css({ opacity: 0.3 }); $("#page-wrap div.button").click(function(){ $clicked = $(this); // if the button is not already "transformed" AND is not animated if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) { $clicked.animate({ opacity: 1, borderWidth: 5 }, 600 ); // each button div MUST have a "xx-button" and the target div must have an id "xx" var idToLoad = $clicked.attr("id").split('-'); //we search trough the content for the visible div and we fade it out $("#content").find("div:visible").fadeOut("fast", function(){ //once the fade out is completed, we start to fade in the right div $(this).parent().find("#"+idToLoad[0]).fadeIn(); }) } //we reset the other buttons to default style $clicked.siblings(".button").animate({ opacity: 0.5, borderWidth: 1 }, 600 ); }); });

下载地址
预览地址

链接:http://www.jqueryba.com/2018.html(转载时请注明本文出处及文章链接)
标签:

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!