Just touched the front end, want to learn the introduction of JQuery. In order to realize the appearance and disappearance of advertisement banner with JQ, we need to cooperate with timing function. First, we need to introduce JQuery.js file or use cdn image.
I. JQuery's commonly used effect function
- show() display function
- hide () hidden function
- fadeIn() fades away
- fadeOut() Gradient appears
- slideUp() slides up and disappears
- slideDown() slides down and appears
The usage of these functions is very similar. The following are the main usages of show method:
Display hidden matching elements.
This is the animated version of'show speed [callback]. If the selected elements are visible, this method will not change anything. Whether this element is hidden through the hide() method or display:none; is set in CSS, this method will work. Speed: A string ("slow", "normal", "fast") or a millisecond value representing the length of an animation (e.g. 1000)
fn: A function that is executed at the completion of the animation, with each element executed once. speed: A string ("slow", "normal", "fast") or a millisecond value representing the length of an animation (e.g. 1000)
easing:(Optional) is used to specify the switching effect, default is "swing", available parameter "linear"
fn: A function that is executed at the completion of the animation, with each element executed once.
(1) show () is displayed directly
(2) show takes milliseconds to display.
(3) show ("fast") can take the value slow fast normal
(4) show (value of milliseconds, fn): how many milliseconds it takes to display and then execute the FN function.
2. The Analysis Process of Hidden Advertising Banner Display
1. There is a div element in html to place the advertisement bar.
<div id="ad" >
<img src ="../img/1.jpeg"/>
</div>2. Set the display attribute to none in style
<style>
#ad{ display:none}
</style>3. Set the timer to make 5 seconds call to div that displays id="ad"
<script>
var time ;
$(function(){
//Five seconds after setting the timer to execute the function
time = setInterval("showAd()",5000);//Method names need parentheses
});
function showAd () {
// $("#ad").show("fast");
// SlideDown (2000); // It took two seconds to slide down.
$("#ad").fadeIn(2000);//The appearance of fading in
clearInterval(time);
//Set a timer of 5 seconds to hide advertisements
time = setInterval("hideAd()",5000);
}
</script>4. Hidden functions need to be set
function hideAd () {
// $("#ad").hide("fast");
// SlideUp (2000); // It takes two seconds to slide up and disappear.
$("#ad").fadeOut(2000);//Fade away
//Clearing time
clearInterval(time);
}Remembering Clear Timing Tasks
The complete Html is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Timely pop-up ads</title>
<!--
//Author: ahhflkl@126.com
//Time: 2018-04-22
//Description:
/*
* 1.Create an html page
2.Create a div advertisement on the page, and set the display attribute of the div to none
3.Set up a timing operation to perform a display in 5 seconds
4.Set up another timing operation to show bank operation after five seconds
*/
-->
<style>
#index{width: 100%;height: 400px;background-color: green;}
#ad{ display: none; width: 100%; height: 400px;}
#img{height: 400px; width: 100%;}
</style>
<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>
<script>
var time ;
$(function(){
//Five seconds after setting the timer to execute the function
time = setInterval("showAd()",5000);//Method names need parentheses
});
function showAd () {
// $("#ad").show("fast");
$("#ad").slideDown(2000);//It takes two seconds to slide down.
// $("# ad").fadeIn(2000); // The appearance of fade-in
clearInterval(time);
//Set a timer of 5 seconds to hide advertisements
time = setInterval("hideAd()",5000);
}
function hideAd () {
// $("#ad").hide("fast");
$("#ad").slideUp(2000);//It takes two seconds to slide up and disappear.
// $("# ad").fadeOut(2000); // fade out disappears
//Clearing time
clearInterval(time);
}
</script>
</head>
<body>
<div id="ad"><img id="img" src="img/1.jpeg"/></div>
<div id="index">home page</div>
</body>
</html>