Question

我正在开发新网站，我遇到了问题。我应该使用类或javascript代码更改样式，例如：

班级方式：

$('.class').hover(function()
{
    $(this).addClass('nameofclass');
},function()
{
    $(this).removeClass('nameofclass');
}

javascript方式：

$('.class').hover(function()
{
    $(this).css('property','value');
},function()
{
    $(this).css('property','value');
}

关于动画的相同问题，但为了在动画中使用类，我需要使用插件。我应该使用插件来允许类动画吗？

Answer 1

更改类，然后在CSS中设置样式，行为在JS中。

这也有一个优点，你可以在支持它们的浏览器中使用CSS转换，同时在旧版本中使用动画，通过在需要的地方添加转换属性，然后在新浏览器中使用css而不是jQuery中的动画。

例如，假设您要淡出div：

CSS

.fade {
    opacity:0;
}

.box {
    width:100px;
    height:100px;
    background-color:red;
    -webkit-transition:all ease-in-out 0.6s;
    -moz-transition:all ease-in-out 0.6s;
    -ms-transition:all ease-in-out 0.6s;
    -o-transition:all ease-in-out 0.6s;
    transition:all ease-in-out 0.6s;
}

HTML

<div class="box"></div>

您的javascript可能如下所示：

JS

$(document).ready(function() {
    $(".box").click(function(){
         $(this).toggleClass("fade");
    });
});

在非转换浏览器中，您不会褪色。要添加它，您可以使用动画来设置属性的动画。

有关过渡的更多信息，请查看http://css3.bradshawenterprises.com/。

CSS使用类或javascript更改样式/动画样式？

1 个答案: