- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do I use jQuery effects?
For hiding and showing the div, you can use hide and show method.
For hiding
$('#id1').hide();For showing
$('#id1').show();Example
<html >
<head>
<title>showhide</title>
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btn1').click(function () {
$('#id1').hide();
});
$('#btn2').click(function () {
$('#id1').show();
});
});
</script>
</head>
<body>
<div>
<p id="id1" style="color:red">I Am A Simple Paragraph</p>
</div>
<button type="button" id="btn1">Hide</button>
<button type="button" id="btn2">Show</button>
</body>
</html>| Method | Description |
|---|---|
| animate() | Runs a custom animation on the selected elements |
| clearQueue() | Removes all remaining queued functions from the selected elements |
| delay() | Sets a delay for all queued functions on the selected elements |
| dequeue() | Removes the next function from the queue, and then executes the function |
| fadeIn() | Fades in the selected elements |
| fadeOut() | Fades out the selected elements |
| fadeTo() | Fades in/out the selected elements to a given opacity |
| fadeToggle() | Toggles between the fadeIn() and fadeOut() methods |
| finish() | Stops, removes and completes all queued animations for the selected elements |
| hide() | Hides the selected elements |
| queue() | Shows the queued functions on the selected elements |
| show() | Shows the selected elements |
| slideDown() | Slides-down (shows) the selected elements |
| slideToggle() | Toggles between the slideUp() and slideDown() methods |
| slideUp() | Slides-up (hides) the selected elements |
| stop() | Stops the currently running animation for the selected elements |
| toggle() | Toggles between the hide() and show() methods |
| addClass() | Adds one or more class names to selected elements |
| after() | Inserts content after selected elements |
| append() | Inserts content at the end of selected elements |
| appendTo() | Inserts HTML elements at the end of selected elements |
| attr() | Sets or returns attributes/values of selected elements |
| before() | Inserts content before selected elements |
| clone() | Makes a copy of selected elements |
| css() | Sets or returns one or more style properties for selected elements |
| detach() | Removes selected elements (keeps data and events) |
| empty() | Removes all child nodes and content from selected elements |
| hasClass() | Checks if any of the selected elements have a specified class name |
| height() | Sets or returns the height of selected elements |
| html() | Sets or returns the content of selected elements |
| innerHeight() | Returns the height of an element (includes padding, but not border) |
| innerWidth() | Returns the width of an element (includes padding, but not border) |
| insertAfter() | Inserts HTML elements after selected elements |
| insertBefore() | Inserts HTML elements before selected elements |
| offset() | Sets or returns the offset coordinates for selected elements (relative to the document) |
| offsetParent() | Returns the first positioned parent element |
| outerHeight() | Returns the height of an element (includes padding and border) |
| outerWidth() | Returns the width of an element (includes padding and border) |
| position() | Returns the position (relative to the parent element) of an element |
| prepend() | Inserts content at the beginning of selected elements |
| prependTo() | Inserts HTML elements at the beginning of selected elements |
| prop() | Sets or returns properties/values of selected elements |
| remove() | Removes the selected elements (including data and events) |
| removeAttr() | Removes one or more attributes from selected elements |
| removeClass() | Removes one or more classes from selected elements |
| removeProp() | Removes a property set by the prop() method |
| replaceAll() | Replaces selected elements with new HTML elements |
| replaceWith() | Replaces selected elements with new content |
| scrollLeft() | Sets or returns the horizontal scrollbar position of selected elements |
| scrollTop() | Sets or returns the vertical scrollbar position of selected elements |
| text() | Sets or returns the text content of selected elements |
| toggleClass() | Toggles between adding/removing one or more classes from selected elements |
| unwrap() | Removes the parent element of the selected elements |
| val() | Sets or returns the value attribute of the selected elements (for form elements) |
| width() | Sets or returns the width of selected elements |
| wrap() | Wraps HTML element(s) around each selected element |
| wrapAll() | Wraps HTML element(s) around all selected elements |
| wrapInner() | Wraps HTML element(s) around the content of each selected element |
- Related Articles
- How do we use jQuery selector eq:()?
- How do we use # in jQuery Attribute Selector?
- How do we use .not() with jQuery selector?
- How do I select text nodes with jQuery?
- How do I use Selenium IDE?
- How do I shift from jQuery to core JavaScript?
- How to increase the duration of jQuery effects?
- How do we use jQuery Attribute selector with a period?
- Why do we use jQuery over JavaScript?
- How do I use arrays in C++?
- How do I use tabHost for Android?
- How do I use Selenium with Ruby?
- How do I use PIL with Tkinter?
- How do I display only the visible text with jQuery?
- How do I add a simple jQuery script to WordPress?
Advertisements