Get the App
SLTechnology News&Howtos  ›  Development  › 

How jquery enables elements to slide up and disappear

Shulou Source: shulou.com Published: 2022-05-31 18:34:52 09月13日 Update

In this article Xiaobian for you to introduce in detail "jquery how to achieve element upward sliding disappear", the content is detailed, the steps are clear, the details are handled properly, I hope this "jquery how to achieve element upward sliding disappear" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

Method: 1, with slideUp (), syntax "$(" element "). SlideUp (millisecond)", the selected element will be hidden by sliding; 2, with slideToggle (), the syntax "$(" element "). SlideToggle (millisecond)", when the element is displayed, it will be hidden by sliding.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

Jquery realizes the method of element sliding upward and disappearing

1. Use slideUp ()

The slideUp () method hides the selected element in a sliding manner.

Note: hidden elements are not fully displayed (no longer affect the layout of the page).

$(document) .ready (function () {$(".btn1") .click (function () {$("p") .slideUp (1000);});})

This is a paragraph.

Up-slide hidden element

2. Use slideToggle ()

SlideToggle () checks the visible state of the selected element, and if an element is visible, it hides the element by sliding up; if an element is hidden, it displays the element by sliding down.

$(document) .ready (function () {$(".btn1") .click (function () {$("p") .slideToggle (1000);});})

This is a paragraph.

Sliding hidden / show element

Read this, the "jquery how to achieve elements to slide upward disappear" article has been introduced, want to master the knowledge of this article still need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.

Tags: Elements ways articles methods content paragraphs states grammar this is proper layout ideas tutorials new knowledge more steps versions environment computer knowledge Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno vpn macOS NVidia Linux Redmi