The element disappears because it is automatically hidden after I click it. Next I will introduce jquery to hide and display html elements. For more information, see.
This example shows how to make some elements disappear when you click the image button. The specific effect is shown in:
The following is the core jQuery code:
| The Code is as follows: |
Copy code |
$ (Document). ready (function (){
$ (". Pane. delete"). click (function (){
$ (This). parents (". pane"). animate ({
Opacity: "hide"
}, "Slow ");
}); }); |
When you click , jQuery first looks for the parent element of <div>, and then sets the opacity of the parent element to transparent at a slow speed to hide the element.
Instance (The jquery file is not provided here. You can download the latest jquery file from the official website.)
| The Code is as follows: |
Copy code |
<! DOCTYPE html>
<Head>
<Meta charset = "UTF-8"/>
<Title> simple disappearing effect </title>
<Script type = "text/javascript" src = "jquery. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ (". Pane. delete"). click (function (){
$ (This). parents (". pane"). animate ({opacity: 'hide '}, "slow ");
});
});
</Script>
<Style type = "text/css">
Body {margin: 10px auto; width: 470px ;}
H3 {margin: 0; padding: 0 0. 3em ;}
P {margin: 0; padding: 0 0. 5em ;}
. Pane {background: # edf5e1; padding: 10px 20px 10px; position: relative; border-top: solid 2px # c4df9b ;}
. Pane. delete {position: absolute; top: 10px; right: 10px; cursor: pointer ;}
</Style>
</Head>
<Body>
<Div class = "pane">
<H3> Sample heading <P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi
Malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo
Lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae
Odio. Vivamus vitae ligula. </p>
</div>
<Div class = "pane">
<H3> Sample heading <P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi
Malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo
Lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae
Odio. Vivamus vitae ligula. </p>
</div>
<Div class = "pane">
<H3> Sample heading <P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi
Malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo
Lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae
Odio. Vivamus vitae ligula. </p>
</div>
</Body>
</Html> |
