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>
MethodDescription
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

Updated on: 22-Jun-2020

105 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements