仿淘宝动画选项卡

$(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下载源码

发表评论

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