SoFunction
Updated on 2025-02-28

jQuery uses slideUp method to achieve slow closing of control elements

jQuery uses slideUp method to achieve slow closing of control elements

Updated: March 27, 2015 09:44:30 Author: Shang Da Wang
This article mainly introduces jQuery's function of using slideUp method to achieve the slow closing of elements. The example analyzes the use skills of slideUp method in jQuery, which has certain reference value. Friends who need it can refer to it.

This article describes the technique of jQuery using slideUp method to implement the slow-collapse function of controlling elements. Share it for your reference. The specific implementation method is as follows:

<!DOCTYPE html>
<html>
<head>
<script src="js/">
</script>
<script>
$(document).ready(function(){
 $("#flip").click(function(){
  $("#panel").slideUp("slow");
 });
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<div >Click to slide up panel</div>
<div >Hello world!</div>
</body>
</html>

I hope this article will be helpful to everyone's jQuery programming.

  • jQuery
  • slideUp
  • method

Related Articles

  • jquery picture Silhouette Fadeins gradually show effect

    I often drifted to see this article on css-tricks, so I moved it over. The following translations are all described in css-tricks tone.
    2010-02-02

  • Example analysis of three methods of each traversal in jQuery

    This article mainly introduces three methods of each traversal in jQuery. It analyzes the relevant operation techniques of jQuery using each traversal DOM elements in combination with examples, and comes with a comprehensive example for summary instructions. Friends who need it can refer to it.
    2018-09-09

  • Detailed compilation of common development techniques by jQuery

    Rich experience in jquery development can improve development skills. This article has compiled some common jquery development skills. Friends in need can refer to it.
    2013-01-01

  • Summary of JQuery form element value assignment method

    This article mainly introduces the summary of JQuery form element value assignment method. The article introduces the example code in detail, which has a certain reference value for everyone's learning or work. Friends who need it can refer to it.
    2020-05-05

  • Detailed explanation of the use of jQuery-Citys provincial, municipal and district three-level menu linkage plug-in

    This article mainly introduces the use of jQuery-Citys provincial, municipal and district three-level menu linkage plug-in, which has certain reference value. Interested friends can refer to it.
    2019-07-07

  • Detailed explanation of pagination implementation

    This article mainly introduces the implementation method of pagination in detail, which has certain reference value. Interested friends can refer to it.
    2019-07-07

  • jquery asynchronously call the page background method‏()

    Two simple examples are given, both without parameters and with parameters, and the returned json data.
    2011-03-03

  • jQuery Pagination Ajax paging plugin (no refresh and delay when paging switching) Chinese translation version

    This jQuery plug-in is an Ajax paging plug-in, which is loaded at one time, so there is no refresh or delay when switching pages. If the data volume is large, it is not recommended to use this method because it will be slower to load. Next, let’s introduce the usage in detail. Interested friends can learn about it.
    2013-01-01

  • Based on jquery, top navigation display hidden when page scrolling is implemented

    This article mainly introduces the hidden effect of the top navigation display when the page is scrolled based on jquery. When the page scrolls down, the navigation menu is dynamically hidden. When the page scrolls to the top, the navigation menu is dynamically displayed. Taobao has also adopted this effect. Interested friends can refer to it.
    2015-11-11

  • How to convert selected objects into original DOM objects

    The collection returned by selecting an element on a page is a jQuery object instead of the original DOM object, so how do you convert it into a DOM object? Here is a good method, you can try it
    2014-06-06

Latest Comments