jQuery функция цепочки эффект - PullRequest
       1

jQuery функция цепочки эффект

0 голосов
/ 29 сентября 2019

Мне нужно создать функцию jQuery, которая содержит цепочечный эффект для многократного перемещения всех элементов моей страницы при смене фона.

Я также хотел бы добавить кнопку, которая будет выполнять функцию при нажатии, и одну, чтобы остановить ее.

Мне удалось создать кнопку, которая изменяет фон при нажатии и скользит.все элементы вверх и вниз.Однако я не уверен, как сдвинуть все элементы влево и вправо, и я не уверен, как это сделать несколько раз.

Вот мой код:

$(function() {
	$("#chainedEffect").click(function() {
		$("*").css("background", "linear-gradient(to right, crimson, lightcoral").animate({right: "500px"}, 1000).animate({left: "500px"}, 1000).slideUp(2000).slideDown(2000);
	});
});
<!DOCTYPE html>

<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Task</title>
	<!-- CSS -->
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
	<!-- jQuery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<script src="task.js"></script>
	<!-- Font Awesome -->
	 <script src="https://kit.fontawesome.com/5ed383133a.js"></script>
</head>

<body>
<!-- Change paragraph styling -->
<p id="changeStyle">Create a jQuery function which changes only a single paragraph's styling.</p>

<!-- Fade out any object that is clicked on. -->
<img src="images/img-fade.jpg" alt="Image Fade">

<!-- Drop down menu -->
<ul class="menu">
	<li>
		<div>
			<a href="#">Item 1 <i class="fas fa-sort-down"></i></a>
		</div>
		<ul class="dropDownMenu">
			<li>Item 1.1</li>
			<li>Item 1.2</li>
			<li>Item 1.3</li>
			<li>Item 1.4</li>
		</ul>
	</li>
	<li>
		<div>
			<a href="#">Item 2 <i class="fas fa-sort-down"></i></a>
		</div>
		<ul class="dropDownMenu">
			<li>Item 2.1</li>
			<li>Item 2.2</li>
			<li>Item 2.3</li>
			<li>Item 2.4</li>
		</ul>
	</li>
	<li>
		<div>
			<a href="#">Item 3 <i class="fas fa-sort-down"></i></a>
		</div>
		<ul class="dropDownMenu">
			<li>Item 3.1</li>
			<li>Item 3.2</li>
			<li>Item 3.3</li>
			<li>Item 3.4</li>
		</ul>
	</li>
</ul>

<!-- Chained effect -->
<button id="chainedEffect">Chained Effect</button>
</body>

</html>

Я новичок в jQuery, поэтому буду признателен за помощь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...