CSSスタイルの変更/クラスまたはJavaScriptを使用したスタイルのアニメーション？

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内にあります。

これはまた、必要に応じてトランジションプロパティを追加し、新しいブラウザのjQueryでアニメーション化するのではなくcssを使用して、古いトランジションのアニメーションを使用しながら、CSSトランジションをサポートするブラウザでCSSトランジションを使用できるという利点があります。例えば

、あなたは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/をご覧ください。