旋轉圖像與jQuery的問題

我試圖創建一個可摺疊的導航切換時，其中，箭頭向上（向下時隱時現）。

我一直在閱讀了關於與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>

我在想，如果有人可以幫助解釋我怎麼可能轉換之類的功能，我的插件？

來源

2012-12-22 mtthwbsh

檢查一下與jQuery的進一步旋轉動畫：http://stackoverflow.com/questions/12062818/how-to-combine-jquery-animate-with-css3- properties-without-using-css-transitions –

你應該看看這個標誌動畫太：（http://bilol.com.tr/ –

這實際上只是添加了一些CSS元素。你可以在你的樣式表創建一個類：

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

，然後只用撥動類添加/刪除它。

這不會提供任何動畫。 CSS3轉換甚至可以爲你做，而不需要JavaScript來動畫。看看this，如果你想嘗試的話，它有一個JSFiddle演示。

編輯

這裏有一個關於如何執行在兩個方向上CSS過渡演示：

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

來源

2012-12-22 01:52:18

我明白如何應用CSS3轉換，我使用了一個我的標誌，我點擊時添加它時遇到問題是我的問題。我將繼續使用這些註釋工作。 – mtthwbsh

把這個放在你的點擊函數中應該可以工作：'$（「＃menu-icon」）。toggleClass（「rotate」）;'如果它不工作，你有一個jsfiddle或其他網站，我可以看一看在嗎？ –

只是我上面發佈的網址。我旅行時無法回到原位，但會記住您的筆記，感謝您的幫助！ – mtthwbsh

檢查這一點，也許可以幫助別人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-09 18:24:50 Andreybeta

我建議使用立方貝塞爾過渡使其更有趣： 'transition：.3s cubic-bezier（.17，.67，.21,1.69）;' https://jsfiddle.net/6tt38q2q/2/ – Yuri

看起來很酷。謝謝。 – Andreybeta

旋轉圖像與jQuery的問題

回答

相關問題