我试图使用按钮行上的第三个按钮同时切换两个类。我有两个正在运行的元素。不，这并不意味着优雅，它的目的是向我自己展示我是否了解如何同时运行两个动画。现在它们按顺序运行(一个接一个)。有没有办法同时启动两个动画？
$(document).ready(function() {
// change the title size
function toggleH1S() {
$("h1").toggleClass("big", 500, "easeOutBounce");
}
// change the title color
function toggleH1C() {
$("h1").toggleClass("red", 500, "linear");
}
// show or hide the text and show or hide the text color changing button
function toggleP() {
if ($("#dummy").css("display") == "block") {
$("#dummy").slideUp("slow", "easeOutBounce");
}
else {
$("#dummy").slideDown("slow", "easeOutBounce");
}
$("#t4").toggle("slow", "easeOutBounce");
}
// change text color
function togglePC() {
$("#dummy").toggleClass("red", 500, "linear");
}
// single event controllers
$("#t1").click(function() {
toggleH1S();
});
$("#t2").click(function() {
toggleH1C();
});
$("#t3").click(function() {
toggleP();
});
$("#t4").click(function () {
togglePC();
});
// double even controllers
$("#t5").click(function () {
toggleH1S();
toggleH1C();
});
$("#t6").click(function () {
toggleP();
togglePC();
});
});/* basic styles */
body {
font-family: verdana;
margin: 0 10px;
padding: 0;
}
h1 {
display: inline-block;
}
h1,
p {
padding: 10px;
}
/* customized buttons */
button {
outline: none;
padding: 3px 6px;
font-size: 16pt;
border-radius: 5px;
}
button,
button:link,
button:visited,
button:hover {
box-shadow: 1px 1px 2px #ccc;
border: 1px solid #ccc;
}
button:active {
box-shadow: inset 0px 0px 4px #ccc;
}
/* contextual button styles */
div.block {
display: block;
margin-bottom: 10px;
}
button.both {
background-color: #d4b2b2;
font-weight: bold;
color: #700000;
}
button.sizer {
background-color: #b6e1d2;
color: #0E9B6C;
}
button.colorer {
background-color: #e8cf9f;
color: #C7880F;
}
/* styles for changes */
h1.big {
font-size: 100px;
}
h1.red,
p.red {
color: #900000;
background-color: #ddb2b2;
border-radius: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sand 2</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/js_jquery.js"></script>
<link rel="stylesheet" href="css/sandy_styles.css">
</head>
<body>
<h1>jQuery Sandbox</h1>
<div class="block">
<button id="t1" class="sizer">Grow/Shrink Title</button>
<button id="t2" class="colorer">Change Title Color</button>
<button id="t5" class="both">DO BOTH!</button>
</div>
<p id="dummy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
<div class="block">
<button id="t3" class="sizer">Dismiss/Summon Text</button>
<button id="t4" class="colorer">Change Text Color</button>
<button id="t6" class="both">DO BOTH!</button>
</div>
</body>
</html>
</html>最佳答案
我无法让它工作，但根据 https://api.jqueryui.com/toggleClass/ 的文档，您应该能够使用选项对象调用“toggleClass”。可选属性之一是“队列”。当“queue”为 false 时，切换应立即启动，并允许其他切换也立即启动。
var hasClass = $("h1").hasClass("big");
$("h1").toggleClass("big", !hasClass, {duration:500, easing:"easeOutBounce", queue:false});
当使用“queue: false”时，似乎只有一个toggleClass 会实际应用。到目前为止，我找到的唯一解决方案是在一次调用中切换这两个类。
$("h1").toggleClass("big red", 500, "easeOutBounce");
如果我设法同时正确应用两个“toggleClass”调用，我将更正更新我的答案。
关于javascript - 尝试使用 Jquery UI 同时运行两个动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48574197/