此作品是一款非常实用的jquery特效，实现百度应用游戏排行图文切换功能，很多网站都用到这样的效果像购物网站、游戏网站、小说网站的排行榜用喜欢用标题跟文字切换，比较直观，使用很简单，引入jquery库和写几行简单的代码就可以了。。。
核心代码如下：
$(function(){
$(".weekly-list li").bind("mouseenter",weekly_ani).bind("mouseleave",function(){clearTimeout($(this).data("setTime"));});
function weekly_ani(e){
var me=$(e.target).closest("li");
if(me.hasClass("current")) return;
var orili=me.parent().find(".current");
$(this).data("setTime",setTimeout(function(){weekly_move(me,orili,100,39)},150));
}
function weekly_move(me,orili,h,h2){
me.addClass("current");
$(".weekly-list li").unbind("mouseenter",weekly_ani);
setTimeout(function(){
var cur_h=me.height();
if(cur_h < h-2){
var cur_orih=orili.height();
var dh=Math.round((h-cur_h)/2.5);
me.css("height",cur_h+dh);
orili.css("height",cur_orih-dh);
setTimeout(arguments.callee,25);
}
else{
me.addClass("current").css("height",h);
orili.css("height",h2);
$(".weekly-list li").bind("mouseenter",weekly_ani);
orili.removeClass("current");
}
},25);
}
$(".weekly-list").find("li:first").addClass("current").animate({height:100}, 300);
});
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
图文切换 滑动插件 选项卡 手风琴效果