$(function() {
$('.J_title').hover(function() {

var self = $(this),//当前标题
index = self.index(),//当前标题的索引
offset = index * -300,//内容选项卡的偏移量
cObj = $('.tab_body .conve-box').eq(index),//当前内容选项卡
style = 'left:' + offset + 'px;transition:left 0.2s linear 0s';//动画样式

self.addClass('cur').siblings().removeClass('cur');//选中标题操作

cObj.css('visibility', 'visible').siblings().css('visibility', 'hidden');//切换内容选项卡

$('.tab_body').attr('style', style);//添加动画

setTimeout(function() {

//重置动画
if (cObj.css('visibility') == 'visible') {

$('.tab_body').attr('style', 'left:' + offset + 'px;transition:none');
}

},200)

})
})

查看demo仿淘宝动画选项卡
下载demo下载源码

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Captcha Code