5

問題のサイト: http://mtthwbsh.com

トグルすると矢印が上向き（非表示の場合は下向き）の折りたたみ可能なナビゲーションを作成しようとしています。

jQuery を使用した画像の回転について調べたところ、これが私の最高のリソースであることがわかりました: Rotate Image(s) OnClick With jQuery?

ここで何が起こっているかは理解できますが、マークアップで視覚化するのに苦労しています。折りたたみ式ナビゲーションの jQuery は次のとおりです。

<script type="text/javascript">
$(document).ready(function(){
/* toggle nav */
$("#menu-icon").on("click", function(){
    $(".nav").slideToggle();
    $(this).toggleClass("active");
  });
 });
</script>

そのような機能をプラグインに変換する方法を誰かが説明できるかどうか疑問に思っていましたか?

4

2 に答える 2

24

これをチェックしてください、多分誰かを助けることができますhttp://jsfiddle.net/gkmagvo3/515/

<a class="arrow" href="#">        
    <img class="arrow-img rotate-reset" src="img.png" />        
</a>

いくつかのCSS：

.rotate {
    transform: rotate(-180deg);
    /*transform: rotate(180deg);*/
    transition: .3s;
}
.rotate-reset {
    transform: rotate(0deg);
    transition: .3s;
}

そしてJavaScript：

$('.arrow').on("click", function (event) {
    $('.arrow-img').toggleClass('rotate');
    $('.arrow-img').toggleClass('rotate-reset');
});
于 2014-08-09T18:24:50.673 に答える
7

実際には、要素に CSS を追加しただけです。スタイルシートでクラスを作成できます。

.rotate {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

そして、トグルクラスを使用して追加/削除します。

これはアニメーションを提供しません。CSS3 トランジションは、JavaScript をアニメーション化する必要なく、それを行うことさえできます。試してみたい場合は、JSFiddle デモがある this をご覧ください。

編集

CSS トランジションを両方向に実行する方法のデモを次に示します。

http://jsfiddle.net/jwhitted/NKTcL/

于 2012-12-22T01:52:18.617 に答える