У меня есть этот вращающийся div, и я хочу, чтобы он остановился, когда я нажимаю кнопку, используя метод .stop()
, но по какой-то причине он не работает. Надеюсь, вы можете пролить свет на этот вопрос для меня.jQuery stop animation method
Вот фрагмент, который выполняет анимацию и демонстрирует, что кнопка Stop animation
не останавливает анимацию.
$('button').bind('click', function(){
$('.player-disc').stop(true, false);
});
#player {
position: relative;
margin: 30px auto;
height: 300px;
width: 700px;
background-color: #E25822;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 200px;
}
#player .player-disc {
-moz-animation: spin 5s infinite linear;
-webkit-animation: spin 5s infinite linear;
animation: spin 5s infinite linear;
height: 250px;
width: 250px;
background-color: black;
background-size: 250px;
position: absolute;
top: 50%;
left: 25px;
transform: translateY(-50%);
}
#player .player-disc span {
position: absolute;
width:30px;
height: 30px;
background-color:white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
@keyframes spin {
0% {
transform: translateY(-50%) rotate(0deg);
}
100% {
transform: translateY(-50%) rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Stop animation</button>
<div id="player">
<div class="player-disc">
<span></span>
</div>
</div>
Я также попытался любые другие комбинации .stop(false, false)
и т.д.
Ваш вопрос в том, что вы думаете, что JQuery в [ '.stop()'] (https://api.jquery.com/stop/) не действует на * все * анимации, независимо от того, как анимация выполняется. '.stop()' jQuery работает, чтобы остановить анимацию, которая была запущена методами jQuery, а не все существующие методы. Чтобы остановить анимацию, вам нужно будет повлиять на любой способ выполнения анимации. В вашем конкретном случае существует множество методов, о чем свидетельствуют ответы, которые вы получаете. – Makyen
Я переместил ваш код из JSFiddle в вопрос. Для отладки вопросов вы должны включить [mcve] ** в сам вопрос **. Не имея достаточного кода для дублирования проблемы, вопрос считается вне темы и закрыт по этой причине. В другой раз для проблем JavaScript/HTML/CSS попробуйте использовать [snippet] (https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). Если вы можете заставить свой код работать в одном, это значительно облегчает людям возможность узнать, в чем проблема, и предоставить проверенные рабочие решения в своих ответах. – Makyen