Question

所以我试图通过点击使用addClass的按钮和使用Javascript的removeClass来触发动画。

我对HTML / CSS不错，但我只是通过编辑snipets来学习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');
});

工作时间：

What to use instead of XMLBeans now that it has been retired?

Answer 1

你的小提琴有几个问题：

错误的班级名称：js class="menu-circle"和html - $('img .imgblock')
你不需要在jquery选择器.imgblock中的img和class之间留出空格 - 空格意味着你在img标签内寻找.current类（这是不可能的）。
$('.menu-circle').on('click', function(){ var $img = $('.crossRotate'); if (!$img.hasClass('rotate')) { $img.addClass('rotate'); } else { $img.removeClass('rotate'); } });类未定义，也未定义在html中，也未定义在css中，但出现在js中

这是我解决问题的方法，其中有效：DEMO

JS：

/**
 * @BeforeScenario
 */
function initialiseStorage(BeforeScenarioScope $scope)
{
    $con = $this->getService('database_connection');

    $con->executeUpdate("SET foreign_key_checks = 0;");

    $filePath = $this->getMinkParameter('files_path').'/test_db.sql';
    $con->exec(file_get_contents($filePath));

    $con->executeUpdate("SET foreign_key_checks = 1;");
}

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/

通过使用带有Javascript的addClass / removeClass单击按钮来触发div上的动画

3 个答案: