This is the 19th day of my participation in the August Wenwen Challenge.More challenges in August
@[toc]
digression
📢 Blog home: ❤ Bo Xiaochan ❤ 📢 Author column: ❤Python❤ Java❤
preface
Be a qualified backend developer
The basics of the front end also need to be understood
JQuery effects
Hide, show, switch, slide, fade in and out, and animate
1. JQuery hide/Show
As the name implies
The hide function is hide()
The display function is show()
A function that toggles two functions, that is, a function that has both effects: toggle()
The code shows:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=".. / jquery - 3.6.0. Min. Js. ""></script>
<script>
$(document).ready(function (){$("#hide").click(function (){$("p").hide();
});
$("#show").click(function (){$("p").show();
});
$("#toggle").click(function (){$("p").toggle();
});
});
</script>
</head>
<body>
<p>Carefree, without desire or desire</p>
<button id="hide">Click on the hidden</button>
<button id="show">Click on the display</button>
<button id="toggle">Click Hide, and then click Show</button>
</body>
</html>
Copy the code2. JQuery fades in and out
JQuery fadeIn() is used to fadeIn hidden elements.
The jQuery fadeOut() method is used to fadeOut visible elements.
The jQuery fadeToggle() method toggles between fadeIn() and fadeOut().
The jQuery fadeTo() method allows the gradient to a given opacity (value between 0 and 1).
Code:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=".. / jquery - 3.6.0. Min. Js. ""></script>
<script>
$(document).ready(function (){$("p").hide();
$("#fadeTo").show();
$("#in").click(function () {$("#fadeIn").fadeIn();
});
$("#out").click(function () {$("#fadeOut").show().fadeOut();
});
$("#to").click(function () {$("#fadeTo").fadeTo("show".0.1);
});
$("#toggle").click(function () {$("#fadeToggle").fadeToggle();
});
});
</script>
</head>
<body>
<p id="fadeIn">I'm going to show you the fadeIn function</p>
<p id="fadeOut">I'll show you the fadeOn function</p>
<p id="fadeTo">I'll show you the fadeTo function</p>
<p id="fadeToggle">I'm going to show you the fadeToggle function</p>
<button id="in">fadeIn</button>
<button id="out">fadeOut</button>
<button id="to">fadeTo</button>
<button id="toggle">fadeToggle</button>
</body>
</html>
Copy the codeSlide 3.
The jQuery slideDown() method is used to slideDown elements.
The jQuery slideUp() method is used to slide elements up.
The jQuery slideToggle() method toggles between slideDown() and slideUp().
Code:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=".. / jquery - 3.6.0. Min. Js. ""></script>
<script>
$(document).ready(function () {$("#button").click(function () {$("#xg").slideUp();
});
$("#button").dblclick(function () {$("#xg").slideDown();
});
$("#button").click(function () {$("#xg1").slideToggle();
});
});
</script>
</head>
<body>
<p id="button">Click on the hidden</p>
<div id="xg">
<p>I'm the first row.</p>
<p>I'm the second row.</p>
<p>I'm the third row.</p>
<p>I'm row four.</p>
<p>I'm row five.</p>
</div>
<p>The following is slideToggle</p>
<div id="xg1">
<p>I'm the first row.</p>
<p>I'm the second row.</p>
<p>I'm the third row.</p>
<p>I'm row four.</p>
<p>I'm row five.</p>
</div>
</body>
</html>
Copy the code4. The animation
The jQuery animate() method is used to create custom animations.
Grammar:
$(selector).animate({params},speed,callback);
Copy the codeCode: Move paragraph font right to make it larger
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=".. / jquery - 3.6.0. Min. Js. ""></script>
<script>
$(document).ready(function () {$("#dw").click(function () {$("p").animate({
left: '150px'.fontSize: '50px'
});
});
});
</script>
</head>
<body>
<button id="dw">Am I</button>
<p style="position: absolute">Hit the button up there, and I ran</p>
</body>
</html>
Copy the codeYou need to set the position property of the label you are moving to relative, Fixed, or Absolute
Because HTML tags are not moving by default
conclusion
Interest is the best teacher, persistence is the invariable truth. Learn not to be impatient, one step at a time, step forward steadily. Make a little progress every day, and over a long period of time, you will find that you have become very strong.
I am Bu Xiaochan, a cute new self-study, follow me every day a little bit of progress!
