The eighth issue of jQuery that monkeys can also learn - jQuery attribute operation

📚Series of Articles—Contents🔥

to be continued

📌Review the previous issue

In the last issue, I talked about the content of jQuery animation, which is divided into upper and lower parts

In web development, the proper use of animation can make the page more beautiful, thereby enhancing the user experience. jQuery covers a series of methods for realizing animation. When these methods cannot meet the actual needs, users can also customize animation (animate method).
The last issue talked about jQuery display and hide effects and jQuery sliding effects

🎯jQuery animation

In web development, the proper use of animation can make the page more beautiful, thereby enhancing the user experience. jQuery covers a series of methods for realizing animation. When these methods cannot meet the actual needs, users can also customize animation (animate method).

🧩 jQuery stop animation

In the process of using animation, if more than one animation method is called on the same element, then for this element, except for the animation currently being called, other animations will be placed in the effect queue, thus forming an animation queue .

All animations in the animation queue are executed in sequence. By default, only the current animation is executed before the subsequent animation is executed. To this end, jQuery provides the stop() method to stop the animation effect. Through this method, the animation behind the animation queue can be executed in advance.
grammar:
```
$(selector).stop(stopAll,goToEnd);
```
Both parameters of the stop() method are optional. The optional stopAll parameter specifies whether the animation queue should be cleared. Defaults to false, which stops only active animations, allowing any queued animations to execute backwards.

The optional goToEnd parameter specifies whether to complete the current animation immediately. The default is false.

Therefore, by default, stop() will clear the current animation specified on the selected elements.
Due to the different settings of the parameters of the stop() method, there will be different effects. The following uses the div element as an example to demonstrate 4 common usage methods.
```
$("div").stop();        // Stop the current animation and continue to the next animation
$("div").stop(true);      // Clear all animations in the div element animation queue
$("div").stop(true, true);   // Stop the current animation and clear all animations in the animation queue
$("div").stop(false, true);   // Stop the current animation and continue to the next animation
```
In the above code, when the stop() method does not pass parameters, it means to immediately stop the currently executing animation and start executing the next animation in the animation queue. If the first parameter is set to true, then the remaining animations in the animation queue will be deleted and will never be executed. If the second parameter is set to true, the current animation will be stopped, but every CSS property participating in the animation will be immediately set to their target value.

When using the hover method to achieve the pull-down and hidden sliding effects in the previous period, if the user frequently operates, an animation queue phenomenon will occur, which will affect the user experience. In order to solve this problem, the code will be rewritten through the stop() method below.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ajax study</title>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<style>
  #panel,
  #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
  }

  #panel {
    padding: 50px;
    display: none;
  }
</style>

<body>
  <div id="flip">Move the mouse pointer in to show or hide the panel.</div>
  <div id="panel">Hello world!</div>

</body>
<script>
  $(document).ready(function () {
    $("#flip").hover(function () {
      $("#panel").stop().slideToggle();
    });
  });

</script>
</html>

Before adding stop(), the effect is as follows:

After adding stop(), the animation queue is blocked.

🧩jQuery fade in and fade out

The methods used to control the fade-in and fade-out effects of elements in jQuery are as follows

method	illustrate
fadeIn([speed],[easing],[ fn])	Fade in to show matching elements
fadeOut([speed],[easing],[ fn])	fade out hidden matching elements
fadeTo([[speed],opacity,[easing],[ fn]])	Fade matched elements to the specified transparency
fadeToggle([speed,[easing],[ fn]])	Toggle between fadeIn() and fadeOut() effects

In the above table, the parameter opacity of the fadeTo() method represents the transparency value, ranging from 0 to 1, 0 represents complete transparency, 0.5 represents 50% transparency, and 1 represents complete opacity.

Next, demonstrate the use of fadeIn(), fadeOut(), fadeToggle() and fadeTo() methods through specific code.

1️⃣fadeIn()

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ajax study</title>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<style>
  #panel,
  #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
  }

  #panel {
    padding: 50px;
    display: none;
  }
</style>

<body>
  <p>The following example demonstrates fadeIn() The effect of using different parameters.</p>
  <button>click to fade in div element.</button>
  <br><br>
  <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
  <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
  <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
  
</body>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});

</script>
</html>

2️⃣fadeOut()

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ajax study</title>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<style>
  #panel,
  #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
  }

  #panel {
    padding: 50px;
    display: none;
  }
</style>

<body>
  <p>The following example demonstrates fadeOut() The effect of using different parameters.</p>
<button>Click to fade out div element.</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
  
</body>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(1000);
  });
});

</script>
</html>

3️⃣fadeToggle()

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ajax study</title>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<style>
  #panel,
  #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
  }

  #panel {
    padding: 50px;
    display: none;
  }
</style>

<body>
  <p>The example demonstrates fadeToggle() used a different speed(speed) parameter.</p>
  <button>click to fade in/fade out</button>
  <br><br>
  <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
  <br>
  <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
  <br>
  <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>


</body>
<script>
  $(document).ready(function () {
    $("button").click(function () {
      $("#div1").fadeToggle();
      $("#div2").fadeToggle("slow");
      $("#div3").fadeToggle(1000);
    });
  });
</script>

</html>

4️⃣fadeTo()

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ajax study</title>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<style>
  #panel,
  #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
  }

  #panel {
    padding: 50px;
    display: none;
  }
</style>

<body>
  <p>demo fadeTo() use different parameters</p>
  <button>click me to lighten the color</button>
  <br><br>
  <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
  <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
  <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>


</body>
<script>
  $(document).ready(function () {
    $("button").click(function () {
      $("#div1").fadeTo("slow", 0.15);
      $("#div2").fadeTo("slow", 0.4);
      $("#div3").fadeTo("slow", 0.1);
    });
  });
</script>

</html>

📚Continuous update🔥

Tags: Front-end Javascript JQuery Framework

Posted by sansan on Sat, 26 Nov 2022 04:41:44 +1030

Programs Wiki

The eighth issue of jQuery that monkeys can also learn - jQuery attribute operation

📚Series of Articles—Contents🔥

📌Review the previous issue

🎯jQuery animation

🧩 jQuery stop animation

🧩jQuery fade in and fade out

1️⃣fadeIn()

2️⃣fadeOut()

3️⃣fadeToggle()

4️⃣fadeTo()

Popular Tags