Question

我正在尝试使用按钮行上的第三个按钮同时切换两个类。我有两个运行的元素。并且这并不意味着优雅，如果我理解如何同时运行两个动画，它意味着向我自己展示。现在他们按顺序运行（一个接一个）。有没有办法同时启动两个动画？

＆＃13;

$(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();
});
});

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我无法让它发挥作用，但根据https://api.jqueryui.com/toggleClass/的文档，您应该可以调用＆＃34; toggleClass＆＃34;带有选项对象。其中一个可选属性是＆＃34; queue＆＃34;。当＆＃34;队列＆＃34;如果错误，切换应立即开始，并允许其他切换也立即开始。

var hasClass = $("h1").hasClass("big");
$("h1").toggleClass("big", !hasClass, {duration:500, easing:"easeOutBounce", queue:false});

使用＆＃34; queue：false＆＃34;时，似乎只有一个toggleClass实际应用。到目前为止，我找到的唯一解决方案是在一次调用中切换两个类。

$("h1").toggleClass("big red", 500, "easeOutBounce");

如果我设法同时获得两个＆＃34; toggleClass＆＃34;我会更正我的答案并更正。要求正确申请。

尝试使用Jquery UI一次运行两个动画

1 个答案: