通過使用Java的addClass / removeClass單擊按鈕來觸發div上的動畫

Question

因此，我試圖通過使用addClass和帶Java的removeClass的按鈕單擊來觸發動畫。

我並不擅長HTML / CSS，但我只想通過編輯代碼片段來學習Javascript。

所以這是我的，您能告訴我為什么當我單擊黑色按鈕時div不會旋轉嗎？

提前致謝 ！

<button class="menu-circle"></button>

<img class='imgblock' src="http://lorempixel.com/400/200/" alt="" />

.menu-circle {
height: 100px;
width: 100px;
background-color: #000000;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
transition: .1s;
z-index: 100;
border: none;
}

.menu-circle:hover {
height: 115px;
width: 115px;
}

.menu-circle:active {
height: 100px;
width: 100px;
}

.imgblock {
display: block;
margin: 20px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}

.rotate {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

$('.menu-circle').on('click', function(){
$('img .imgblock').addClass('rotate');
$('img .imgblock .rotate').removeClass('rotate');
});

工作場所：

http://jsfiddle.net/leokaj/rv5PR/366/

Answer 1

您的小提琴有幾個問題：

1. 錯誤的類名：在js $('.menucircle')和html中$('.menucircle') class="menu-circle"
2. 您不需要在jquery選擇器$('img .imgblock') img與類之間存在空格-空格表示您正在img標記內查找.imgblock類（這是不可能的）。
3. .current類既沒有在html中也沒有在css中定義，但出現在js中

這是我解決問題和有效的小提琴： 演示

JS：

$('.menu-circle').on('click', function(){
    var $img = $('.crossRotate');
    if (!$img.hasClass('rotate')) {
        $img.addClass('rotate');
    } else {
        $img.removeClass('rotate');
    }
});

Answer 2

您必須通過2個不同的事件來對此進行動畫處理

$('.menu-circle').on('mousedown', function(){
    $('.imgblock').addClass('rotate');  
});

$('.menu-circle').on('mouseup', function(){
    $('.imgblock').removeClass('rotate');
});

小提琴http://jsfiddle.net/3ehcuky5/

如果您想保持圖像旋轉或@alynioke解決方案不是很好

Answer 3

由於您似乎想讓它在動畫中有點跳動，並且您已經在使用jQuery，那么我想說您需要查看jQuery庫的.animate（）方法

https://api.jquery.com/animate/