Community Learn Tools Library Leisure

English

Home > Web Front-end > JS Tutorial > The difference between toggle / slideToggle / fadeToggle

The difference between toggle / slideToggle / fadeToggle

巴扎黑

Release： 2017-06-26 14:34:29

Original

1567 people have browsed it

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JQ</title>
	<style>
		div { width: 100px; height: 100px; background: yellow; border: 1px red solid; }
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<input type="button" value="yes,im ok">
<!-- JS -->

<script src="js/jquery-3.2.1.min.js?1.1.11"></script>
<script>

$(&#39;input&#39;).click(function(){
	$(&#39;div:eq(0)&#39;).toggle(3000)
	$(&#39;div:eq(1)&#39;).slideToggle(3000)
	$(&#39;div:eq(2)&#39;).fadeToggle(3000)
})
	
</script>
</body>
</html>

Copy after login

Summary:

toggle on the entire element Visible style attributes perform animation transition processing

SlideToggle only performs transparency transition processing on elements

fadeToggle only performs transparency transition processing on elements

The above is the detailed content of The difference between toggle / slideToggle / fadeToggle. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

toggle the difference

source：php.cn

Previous article：Detailed explanation of jQuery’s simple operations on elements Next article：jQuery adds priority level of style attributes

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn