{"id":5464,"date":"2020-03-07T16:37:12","date_gmt":"2020-03-07T11:07:12","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=5464"},"modified":"2020-03-24T12:37:33","modified_gmt":"2020-03-24T07:07:33","slug":"jquery-effects","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/jquery-effects\/","title":{"rendered":"jQUERY EFFECTS"},"content":{"rendered":"\n

jQuery Effects<\/h2>\n\n\n\n

Date: 07\/03\/2020<\/h4>\n\n\n\n

Jquery has some of the in-built methods, that methods are used to add the effects for the Html element.<\/p>\n\n\n\n

jQuery | hide()<\/strong><\/h4>\n\n\n\n

hide()<\/strong> is an inbuilt method in jquery, which is used to hide the selected element.<\/p>\n\n\n\n

syntax:<\/h4>\n\n\n\n
$(selector).hide(duration, easing, call_function);<\/pre>\n\n\n\n
Example<\/strong>:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\nhttps:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js<\/a>\n<script>\n$(document).ready(function(){\n  $(\"button\").click(function(){\n    $(\"p\").hide(500);\n  });\n});\n<\/script>\n<\/head>\n\n<body>\n<center>\n<button>ok<\/button>\n\n<p>jquery effects and method test<\/p>\n\n<\/center>\n<\/body>\n<\/html>\n<\/pre>\n\n\n\n
Before clicking the button:<\/strong><\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
After clicking the button:<\/strong><\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
jQuery | <\/strong>toggle()<\/strong><\/h4>\n\n\n\n
toggle() method is used to toggle between hide() and show<\/p>\n\n\n\n
<\/p>\n\n\n\n
Generic Highlighting\n$(selector).toggle(speed, easing, callback)\n\n<\/pre>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\nhttps:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js<\/a>\n<script>\n$(document).ready(function(){\n  $(\"button\").click(function(){\n    $(\"p\").toggle(500);\n  });\n});\n<\/script>\n<\/head>\n\n<body>\n<center>\n<button>toggle<\/button>\n\n<p>jquery effects and method test<\/p>\n\n<\/center>\n<\/body>\n<\/html>\n<\/pre>\n\n\n\n
Before clicking the button:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
After clicking the button:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
After clicking the button next time:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
jQuery | <\/strong>fade<\/h4>\n\n\n\n
fadeIn()<\/strong>  –  used to fade in a invisible element.<\/p>\n\n\n\n
fadeOut()<\/strong> – used to fade out a visible element<\/p>\n\n\n\n
fadeTo()<\/strong> –  used to change the opacity of the selected element.<\/p>\n\n\n\n
fadeToogle()<\/strong> – used to toogle between fadeIn() and fadeOut().<\/p>\n\n\n\n
fadeToggle():<\/strong><\/p>\n\n\n\n
syntax:<\/p>\n\n\n\n
$(selector).fadeToggle(speed,callback);<\/pre>\n\n\n\n
Example:<\/p>\n\n\n\n
<!DOCTYPE html>   \n<html>\n   <head>\n      <title>  \n      <\/title>\n      <style> \n         #mydiv { \n         \tcolor: white;\n         margin-top: 50px; \n         padding-top: 50px; \n         height: 140px; \n         background: blue; \n         } \n      <\/style>\n      https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js<\/a> \n   <\/head>\n   <body>\n      <center>\n      \t<button id = \"fade\">Fade<\/button>  \n         <div id= \"mydiv\">\n         \t<p>pheonixsolutions<\/p>\n         <\/div>      \n      <script>  \n         $(document).ready(function() { \n             $(\"#fade\").click(function() { \n                 $(\"#mydiv\").fadeToggle(); \n             }); \n         }); \n      <\/script> \n      <\/center> \n   <\/body>\n<\/html><\/pre>\n\n\n\n
Before clicking the button:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
After clicking the button:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Again clicking the button:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Conclusion<\/strong>:<\/h4>\n\n\n\n
Thanks for using pheonixsolutions<\/a>.
If you like the blog share it with your friends. <\/p>\n","protected":false},"excerpt":{"rendered":"
jQuery Effects Date: 07\/03\/2020 Jquery has some of the in-built methods, that methods are used to add the effects for […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[756,751,757,755],"class_list":["post-5464","post","type-post","status-publish","format-standard","hentry","category-web-architecture","tag-hide","tag-jquery","tag-show","tag-toggle","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-1q8","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/5464","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=5464"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/5464\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=5464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=5464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=5464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}