Question

我创建了一个jQuery Tabs并且工作正常，但我想添加一些CSS3效果，如scale，Translate，Transitions .. 现在我的标签只有jQuery效果，如fadeIn / slideToggle，但我需要使用CSS3创建我的自定义效果，所以我如何在我的标签代码中添加CSS3动画功能。

请在此处查看我的代码：demo

动画效果所需的一些CSS3代码：

-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;

我想要的动画是，只需点击一下标签，就必须显示来自transform: scale(0.8); to transform: scale(1);的标签内容和opacity: 0; to opacity: 1;

Answer 1

单击选项卡标题时，在匹配的tab-content上设置一个类，启动一个比动画更长的计时器，然后删除该类。

$(".tabs li").click(function(){
    var  cur =$(".tabs li").index(this);
    var elm = $('.tabcontent:eq('+cur+')');
    elm.addClass("pulse");
    setTimeout(function() {
          elm.removeClass("pulse");
    }, 220);
});

Working jsFiddle

Answer 2

将CSS设置为一个类，然后使用.toggleClass()将其应用于给定元素。

所以，

$("tab").click(function(){
$(this).toggleClass("myClass");
});

你的css将是：

.myClass{
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}

如何将CSS3动画效果添加到简单的jQuery选项卡

2 个答案: