Question

您好请解决我的问题..搜索时间，但没有找到正确和有效的解决方案，所以最后我决定在这里发布。

这是HTML

<body>
    <div id="first">
            <img src="Untitled-1.png" width="300px" height="300px">
            <img src="Untitled-1.png" width="300px" height="300px"> <br>
            <button id="start" >START</button>
            <button id="stop">STOP</button>
            <button id="slow" >SLOW</button>
            <button id="fast" >FAST</button>   
    </div>     
</body>

这是我的CSS：

<style>
.anim{      
    animation-name:test;
    animation-delay:0s;
    animation-direction:normal;
    animation-timing-function:linear;
    animation-duration:500ms;
    animation-iteration-count:infinite;     
    }
    .slow{      
    animation-name:test;
    animation-delay:0s;
    animation-direction:normal;
    animation-timing-function:linear;
    animation-duration:1500ms;
    animation-iteration-count:infinite;     
    }
    .fast{      
    animation-name:test;
    animation-delay:0s;
    animation-direction:normal;
    animation-timing-function:linear;
    animation-duration:200ms;
    animation-iteration-count:infinite; 
}

@keyframes test{
    0%{transform:rotateZ(0deg);}
    50%{transform:rotateZ(180deg);}
    100%{transform:rotateZ(360deg);}
}  
</style>

这是jQuery：

$(document).ready(function(){ 
        $('#first').on('click','#start',function(){
        $('img').addClass('anim');
        });

        $('#first').on('click','#stop',function(){
        $('img').removeClass();
        });

        $('#first').on('click','#slow',function(){
        $('img').removeClass().addClass('slow');

        });

        $('#first').on('click','#fast',function(){
        $('img').removeClass().addClass('fast');
        });     

});

看看jQuery .. 我想根据按下的按钮将类（取决于哪个）更改为另一个类。如果＆＃34;慢＆＃34;按下按钮，应删除现有的班级并且按下＆＃39; .slow＆＃39;应该应用类。我尝试了所有建议的方法在互联网上，甚至在这个论坛上，但没有工作。我尝试将此代码作为其他人的建议

$('#first').on('click','#slow',function(){
$('img').removeClass().addClass('slow');});

但没有工作。

Answer 1

最后我设法解决了这个问题.. 实际上我正在使用＆＃39; prefix-free.js＆＃39;没有正确编码铬。一旦我更改了浏览器并在Firefox上运行该代码，它就完美无缺。由于prefex-free.js我没有申请-webkit-或-moz-。谢谢所有参与的人..

编辑：很抱歉，prefix-free.js与此问题无关。问题是由于CHROME浏览器。我已经向chrome的开发人员报告了这个问题。我希望他们能够优先解决这个问题。

Answer 2

您可以尝试使用

删除类

$("img").removeAttr('class');

然后使用

添加新类

$("img").attr('class', 'new-classes');

Answer 3

试试这个

$(document).ready(function(){ 
    $('#first').on('click','#start',function(){
    $('img').addClass('anim');
    });

    $('#first').on('click','#stop',function(){
    $('img').removeClass();
    });

    $('#first').on('click','#slow',function(){
    $('img').removeClass().addClass('slow');

    });

    $('#first').on('click','#fast',function(){
    $('img').removeClass().addClass('fast');
    });

}）;

如何在jq中添加和删除类？

3 个答案: