使用class或javascript更改樣式/動畫風格？

我在新網站上工作，我有問題。我應該改變風格使用類或javascript代碼，例如：使用class或javascript更改樣式/動畫風格？

類方式：

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

的JavaScript方式：

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

約有生同樣的問題，但爲了使用在動畫類中，我需要使用插件。我應該使用插件來允許類動畫？

來源

2011-11-07 Ron

允許使用jQuery的CSS動畫看看這裏http://stackoverflow.com/questions/1248542/jquery-animate-with-css-class-only-without-explicit-styles。 – mario

允許css動畫在這裏看看http://stackoverflow.com/questions/1248542/jquery-animate-with-css-class-only-without-explicit-styles。 – mario

更改類，然後在CSS中設置樣式，行爲在JS中。

這也有一個好處，就是可以在支持它們的瀏覽器中使用CSS過渡，而在舊過程中使用動畫，通過在需要的位置添加transition屬性，然後在新瀏覽器中使用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可以是這樣的：

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

在非過渡瀏覽器中，您只是不會淡入淡出。要補充一點，您可以使用動畫來爲屬性設置動畫。請致電http://css3.bradshawenterprises.com/。

來源

2011-11-07 20:37:22

你能簡化你的答案嗎？〜儘可能多我能理解你想讓我用css〜 – Ron

我已經添加了一些。然後，您可以使用動畫製作類功能在舊版瀏覽器中添加動畫，使用Modernizr檢查轉換。 –

我明白了，那不是我的意思。我想讓我的網站跨瀏覽器（即使使用IE等舊瀏覽器），因此我無法使用css3。我想知道是否僅使用JS（即上面的代碼）更改屬性與使用類和JS（即上面的代碼）更改屬性之間存在差異。 – Ron

使用class或javascript更改樣式/動畫風格？

回答

相關問題