Jquery Rotate Img

Question

jqueryを回転させるためにimg（.arrow-img）を切り替える方法を探しています。

ここに私がいます。

$(document).ready(function() { 
    $(".active-mobile").click(function() { 
    $(".toggle-items").slideToggle(); 
    $(".arrow-img").css("-webkit-transform", "rotateY(0deg)"); 
    $(".arrow-img").css("transform", "rotateY(0deg)"); 
    }); 
}); 

フィドルから分かるように、これは初めて動作します。元の状態に戻すにはリセット/トグルする方法が必要です。私も jQueryの.addClassメソッドを使用せずに、このをしたいと思っ

、私は現在Squarespaceを使用してサイトを構築していて、その方法は、その環境で動作するようには思えません。

フィドル - >https://jsfiddle.net/gavinfriel/5q3zzygx/3/

Answer 1

あなたはクラスのトグル項目の表示の値を確認することができます。クリックしたときのdisplayがnoneの場合、回転量を期待した状態に設定できます。

if($(".toggle-items").css("display") == none){ 

} 
else{ 

} 

だから、あなたがこれを行うことが一つの方法はstyle属性が存在するかどうかを確認することです度insteads

Answer 2

var degrees = 0; 
$(".active-mobile").click(function() { 
    degrees += 90; 
    $(".toggle-items").slideToggle(); 
    $(".arrow-img").css({ 
    'transform': 'rotate(' + degrees + 'deg)', 
    '-ms-transform': 'rotate(' + degrees + 'deg)', 
    '-moz-transform': 'rotate(' + degrees + 'deg)', 
    '-webkit-transform': 'rotate(' + degrees + 'deg)', 
    '-o-transform': 'rotate(' + degrees + 'deg)' 
    }); 
}); 

Answer 3

の量で使用する変数を使用します。 .cssに電話すると、要素にインラインスタイルが適用されます。存在する場合は削除し、それ以外の場合は追加します。このよう

：ここ

$(document).ready(function() { 
    $(".active-mobile").click(function() { 
    $(".toggle-items").slideToggle(); 

    var $arrowImg = $(".arrow-img"); 

    if ($arrowImg.is('[style]')) { 
     $arrowImg.removeAttr('style'); 
    } else { 
     $arrowImg.css("-webkit-transform", "rotateY(0deg)"); 
     $arrowImg.css("transform", "rotateY(0deg)"); 
    } 
    }); 
}); 

はfiddleです。

Answer 4

.toggle-itemsの親にあなたがslideToggle()を実行するたびに、クラスを切り替えるには、ちょうどこの規則にあなたのJSを削減：

$(".active-mobile").click(function() {  
    $(".toggle-items").slideToggle().parent().toggleClass("opened");  
}); 

その後トグルが開かれたときに通常の状態にある矢印を変換するために、このCSSルールを追加します：

.opened .arrow-img { 
    transform: none; 
} 

これを行うのが最も簡単できれいな方法です。以下のデモ：

$(document).ready(function() { 
 
    $(".active-mobile").click(function() { 
 
    $(".toggle-items").slideToggle().parent().toggleClass("opened"); 
 
    }); 
 
});

.tab-wrap-mobile { 
 
    z-index: 100000; 
 
    width: 100%; 
 
    border-top: 1px solid rgba(63, 70, 80, .15); 
 
    text-align: left; 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    background-color: #fff; 
 
} 
 

 
.tab-list-mobile { 
 
    display: block; 
 
    line-height: 50px; 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
} 
 

 
.tab-list-mobile li { 
 
    display: block; 
 
    width: 100%; 
 
    text-align: left; 
 
    border-top: solid .5px #EEEEEE; 
 
} 
 

 
.tab-list-mobile li.active-mobile { 
 
    border-top: none; 
 
} 
 

 
.tab-list-mobile li.active-mobile span.arrow { 
 
    float: right; 
 
    padding-right: 20px; 
 
} 
 

 
.arrow-img { 
 
    width: 15px; 
 
    transform: rotate(180deg); 
 
    -webkit-transform: rotate(180deg); 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
} 
 

 
.opened .arrow-img { 
 
    transform: none; 
 
} 
 

 
.tab-list-mobile li a { 
 
    padding-left: 20px !important; 
 
} 
 

 
.tab-list-mobile li a { 
 
    color: rgba(63, 70, 80, .5); 
 
    text-decoration: none; 
 
} 
 

 
.tab-list-mobile li a:hover { 
 
    cursor: pointer; 
 
    color: rgba(63, 70, 80, .95); 
 
    transition: all .1s ease-in-out; 
 
} 
 

 
.tab-list-mobile li.active-mobile a { 
 
    color: rgba(63, 70, 80, .95); 
 
} 
 

 
.toggle-items { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="tab-wrap-mobile"> 
 
    <ul class="tab-list-mobile"> 
 
    <li class="active-mobile"> 
 
     <a>Software Delivery</a> 
 
     <span class="arrow"> 
 
      <img class="arrow-img" src="https://static1.squarespace.com/static/59c51ac6268b96cf65b0125e/t/5a0455a9f9619aca282064c6/1510233513011/tab-arrow.png"> 
 
     </span> 
 
    </li> 
 
    <div class="toggle-items"> 
 
     <li><a href="/consulting">Consulting</a></li> 
 
     <li><a href="analytics">Analytics</a></li> 
 
     <li><a href="/training">Training</a></li> 
 
    </div> 
 
    </ul> 
 
</div>

ここ

Answer 5

作業フィドルの例である：それはアクティブなクラスを持っている場合、私はちょうどそれをアニメーション化する矢印用の新しいCSSルールを追加 https://jsfiddle.net/vm63nj84/1/

は

.arrow-img.active { 
    -webkit-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
} 

このクラスをjqueryで切り替える：

$(".arrow-img").toggleClass("active"); 

Answer 6

あなたのトランスフォームを使用するクラスに対しては、シンプルで非常にクリーンなアプローチがあり、クリックするとそのクラスが切り替わります。

CSS：

.arrow-img.is-open { 
    transform: rotateY(0deg); 
    -webkit-transform: rotateY(0deg); 
} 

JS：

$(".arrow-img").toggleClass('is-open'); 

https://jsfiddle.net/5q3zzygx/8/