我在新网站工作,我有问题。我是否应该使用类或javascript代码来改变样式,例如:
class way:
$('.class').hover(function()
{
$(this).addClass('nameofclass');
},function()
{
$(this).removeClass('nameofclass');
}
javascript方式:
$('.class').hover(function()
{
$(this).css('property','value');
},function()
{
$(this).css('property','value');
}
关于动画的相同问题,但为了在动画中使用类,我需要使用插件。我应该使用插件来允许类动画吗?
改变类,然后样式在CSS中设置,行为在JS中。
这也有一个好处,你可以在支持CSS转场的浏览器中使用CSS转场,而在旧浏览器中使用animate,通过在需要的地方添加transition属性,然后在新浏览器中使用CSS而不是jQuery中的animate。
例如,假设你想淡出一个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");
});
});
在非过渡浏览器中,你不会得到淡出。要添加这些,你可以使用animate将其动画到属性中。
有关过渡的更多信息,请查看http://css3.bradshawenterprises.com/。