JSを使ってフォントをアニメートする方法

スパンやJQueryライブラリを使って "設計されたアイコン"を使っている人はたくさんいますが、私はFont Awesomeアイコンを使用しています。JSを使ってフォントをアニメートする方法

私は、toggleClass JSを使用してできるだけシンプルにしようとしています。あなたはこの考えを超えている

$(document).ready(function(){ 
 
\t $('#menunav').click(function(){ 
 
\t \t $(this).toggleClass('action'); 
 
\t }); 
 
});

*{ 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#menunav{ 
 
     padding: 40px; 
 
     width: 30%; 
 
     font-size: 50px; 
 
     cursor: pointer; 
 
     -webkit-transform: rotate(0deg); 
 
     -moz-transform: rotate(0deg); 
 
     -o-transform: rotate(0deg); 
 
     transform: rotate(0deg); 
 
} 
 

 
#menunav i{ 
 
     -webkit-transform: rotate(0deg); 
 
     -moz-transform: rotate(0deg); 
 
     -o-transform: rotate(0deg); 
 
     transform: rotate(0deg); 
 
} 
 

 
#menunav .action i{ 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" href="burguer-style.css"> 
 
    <!--font awesome library--> 
 
    <link rel="stylesheet" href="css/font-awesome.min.css"> 
 
    <script src="jquery-1.11.3.js"></script> 
 
    <script src="burguer-action.js" type="text/javascript"></script> 
 
</head> 
 
<body> 
 
    <div id="menunav"> 
 
     <i class="fa fa-navicon"></i> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-03-24 N. Ayancan

'.action'は、他の文字が二つの要素の間に置かれていないのと同じように動作 – Malk

'＃1 menunav.action'なければならない#menunav。 –

クラスとIDの両方が割り当てられている要素が1つしかないため、そうではありません。 – Malk

、フィドル参照：https://jsfiddle.net/36zo44md/

HTML

<div id="menunav"> 
    <i id="faIcon" class="fa fa-navicon"></i> 
</div>

CSS

#menunav{ 
     padding: 40px; 
     width: 30%; 
     font-size: 50px; 
} 

.fa-rotate-90 { 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    transform: rotate(90deg); 
}

を

ジャバスクリプト

$(document).ready(function() { 
    $('#faIcon').click(function() { 
     $(this).toggleClass('fa-rotate-90'); 
    }); 
    });

出典

2016-03-24 18:04:23

私の人生の問題を克服しよう。ありがとう、私が欲しいのと同じように働く。 –

JSを使ってフォントをアニメートする方法

答えて

関連する問題