This time I will show you how to implement the toggle method in jQuery, and use the toggle method in jQuery. What are the precautions? The following is a practical case, let's take a look.
We know that jQuery is used to move up and down, and you can directly use the slideUp() and slideDown() methods. The slideUp() method and slideDown() method will only change the height of the element. If theThe code is as follows:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>toggle-jquery1.9</title> <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script> <style> p.container { height: 320px; border: 1px solid #ccc; } p.left { width: 200px; height: 300px; background-color: #36f; } </style> </head> <body> <p class="container"> <p class="left"></p> </p> <button id="toggle">toggle</button> <script> $(document).ready(function(){ $('#toggle').click(function(){ $('.left').slideToggle(300); }); }); </script> </body> </html>
So, how to achieve left and right sliding in and out?
#demo is as follows:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>toggle-jquery1.9</title> <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script> <style> p.container { height: 320px; border: 1px solid #ccc; } p.left { width: 200px; height: 300px; background-color: #36f; } </style> </head> <body> <p class="container"> <p class="left"></p> </p> <button id="toggle">toggle</button> <script> $(document).ready(function(){ $('#toggle').click(function(){ $('.left').animate({width:'toggle'},350); }); }); </script> </body> </html>
How to use the select component in jquery
How to implement jquery return Car login effect
jQuery custom function application and analysis
Case and detailed explanation of mouse out event
The above is the detailed content of How to implement the toggle method in jQuery. For more information, please follow other related articles on the PHP Chinese website!