create account

jQuery Tutorial #04 Effects Part 01 ( Show, Hide, Toggle, FadeIn, FadeOut and FadeToggle) by alexendre-maxim

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @alexendre-maxim ·
$23.29
jQuery Tutorial #04 Effects Part 01 ( Show, Hide, Toggle, FadeIn, FadeOut and FadeToggle)
<html>
<p><img src="https://steemitimages.com/0x0/http://connect.adfab.fr/wp-content/uploads/2015/06/jquery-logo-1.png" width="598" height="225"/></p>
<p><a href="https://steemitimages.com/0x0/http://connect.adfab.fr/wp-content/uploads/2015/06/jquery-logo-1.png">Image Source</a></p>
<h2>Repository</h2>
<p><a href="https://github.com/jquery/jquery">https://github.com/jquery/jquery</a>&nbsp;</p>
<h2>What Will I Learn?</h2>
<p>I will learn the jQuery effects part 01 the show, hide, toggle, fadeIn, fadeout and fadetoggle effects with examples.</p>
<ul>
  <li>What's the Show/Hide effects and how to use them.</li>
  <li>The definition of FadeIn/FadeOut effects and their uses.</li>
  <li>Combine between Show/Hide by Toggle Effect.</li>
  <li>Combine between FadeIn/FadeOut by FadeToggle Effect.</li>
</ul>
<h2>Requirements</h2>
<ul>
  <li>Knowledge about HTML5 and CSS3</li>
  <li>Knowledge about jQuery</li>
  <li>A text editor like notpad ++&nbsp;</li>
</ul>
<h2>Difficulty</h2>
<ul>
  <li>Basic</li>
</ul>
<h2>Description</h2>
<p>In this tutorial we will take the jquery effects part 1 , in this part we will take the Show, Hide, Toggle, FadeIn, FadeOut and FadeToggle effects with examples .&nbsp;</p>
<h3>1-Show Effect :</h3>
<p>Is a method sets the display proprieties of elements to whatever they initially were they block, inline, or inline-block before the inline style <code>display:โ€‰none</code> was applied to them.</p>
<p>To use the show effect we must select the element then apply the show() method</p>
<p><code>$('element').show(speed, function () { // something here });</code></p>
<p>In this example when the user clicks on ' Advanced Search ' button, the system will display the advanced search div by using ' show ' effect.</p>
<h3>2-Hide Effect :</h3>
<p>The <code>hide()</code> method simply change the inline style <code>display:โ€‰none</code> for the selected elements.</p>
<p>To use the hide effect we must select the element then apply the hide() method &nbsp;</p>
<p><code>$('element').hide(speed, function () { // something here });</code></p>
<p>In the same example if the user wants to return to the default search or the simple search, he will click on the button ' Simple Search ' and the system will hide the advanced search and show the simple search.</p>
<p><strong>My code :&nbsp;</strong></p>
<p><code>/***** Show and Hide Effects *****/</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;$('.advancedSearch').click(function () {</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).toggleClass('activeButton');</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ($(this).hasClass('activeButton')) {</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.searchAdv').show(1000);</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).html('Simple Search')</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.inputSearchA').hide(1000);</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.searchAdv').hide(1000);</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).html('Advanced Search');</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.inputSearchA').show(1000);</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;});</code></p>
<p>The show method will set the display propriety to ' block , inline or inline-block ' depend on the default propriety , the hide method will set the display propriety to ' none ' to hide the element.</p>
<p><img src="https://e.top4top.net/p_959jzw062.png" width="1127" height="124"/></p>
<p><img src="https://d.top4top.net/p_959040me1.png" width="1218" height="97"/></p>
<h3>3- Toggle Effect :</h3>
<p>The <code>toggle()</code> method show or hide the elements, if the element is initially displayed, it will be hidden; if hidden, it will be displayed.</p>
<p>To use the toggle effect we must select the element then apply the toggle() method &nbsp;<code>$('element').toggle(speed, function () { // something here });</code></p>
<p>I will use the same example by toggle effect, I will display and hide the advanced search div with the click event.</p>
<p><strong>My Code :</strong></p>
<p><code>/****** Toggle Effect ******/</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;$('.advancedSearch').click(function () {</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.searchAdv').toggle(1000);</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.inputSearchA').toggle(1000);</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ($('.searchAdv').css('display') === 'block') {</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.advancedSearch').html('Simple Search');</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.advancedSearch').html('Advanced Search');</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;});</code></p>
<p>The first input with class ' inputSearchA ' has the display inline propriety, by the toggle effect it will be hidden , the display propriety will be ' hide ' .</p>
<p>The advanced search is hidden, by the toggle effect it will be shown , the display propriety will be ' block '.</p>
<h3>4- FadeIn Effect : &nbsp;</h3>
<p>The fadeIn function of the Jquery framework makes it possible to display an element or set of html elements that are invisible to the user. It will give a progression effect by modifying the opacity when displaying this element.</p>
<p>To use the fadeIn effect we must select the element then apply the fadeIn() method &nbsp;<code>$('element').fadeIn(speed, function () { // something here });</code></p>
<p>I will show a list of items when I pass the mouse on the service item using the mouseenter event, this effect will change the opacity of element from 0 to 1 to become more smooth.</p>
<p><strong>My code:</strong></p>
<p><code>$('.service').mouseenter(function () {</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.secondList').fadeIn(1000);</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).addClass('active');</code></p>
<p><code>&nbsp;});</code></p>
<p>When I pass the mouse on the service item , I will show the second list by fadeIn effect and add the active class or the green background to the service item and this is the result&nbsp;</p>
<p><img src="https://b.top4top.net/p_9595u0qw1.png" width="1351" height="485"/></p>
<h3>5- FadeOut Effect :</h3>
<p>The fadeOut function of the Jquery framework makes it possible to remove an element or a set of html elements by making them invisible to the user. It will give a progression effect by modifying the opacity at the disappearance of this element.</p>
<p>To use the fadeOut effect we must select the element then apply the fadeOut() method &nbsp;<code>$('element').fadeOut(speed, function () { // something here });</code></p>
<p>When I leave from the service item the system will hide the second list using the fadeOut method.</p>
<p><strong>My Code :</strong></p>
<p><code>$('.service').mouseleave(function () {</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.secondList').fadeOut(10000);</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).removeClass('active');</code></p>
<p><code>});</code></p>
<p>The fadeout method will change the opacity of the second list from 1 to 0 to be hidden, I also removed the active class from the element to be with the transparent background and this is the result&nbsp;</p>
<p><img src="https://c.top4top.net/p_959dt0f62.png" width="1366" height="633"/></p>
<h3>6- FadeToggle Effect :</h3>
<p>The jQuery <code>fadeToggle()</code> method display or hide the selected elements by animating their opacity in such a way that if the element is initially displayed, it will be fade out; if hidden, it will be fade in.</p>
<p>To use the fadeToggle effect we must select the element then apply the fadeToggle() method &nbsp;<code>$('element').fadeToggle(speed, function () { // something here });</code></p>
<p>I will use the same example but with the click event , when I click on the button the system will test if the value of display propriety is ' none ' it will fadeIn the element else it will fadeOut it will change the opacity from 0 to 1 and from 1 to 0.</p>
<p><strong>My Code :</strong></p>
<p><code>$('.service').click(function () {</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.secondList').fadeToggle(10000, function () {</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('toggle');</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});</code></p>
<p><code>&nbsp;&nbsp;&nbsp;&nbsp;});</code></p>
<p>You can do something when the operation finished and this is the callback function.</p>
<h2>Video Tutorial&nbsp;</h2>
<p>https://www.youtube.com/watch?v=21hFywiCqNM&amp;feature=youtu.be</p>
<h2>Curriculum</h2>
<ul>
  <li><a href="https://steemit.com/utopian-io/@alexendre-maxim/create-a-slideshow-using-html5-css3-and-jquery">Create a slideshow using HTML5 , CSS3 and jQuery</a></li>
  <li><a href="https://steemit.com/utopian-io/@alexendre-maxim/jquery-tutorial-01-mouse-events-click-dblclick-mouseenter-mouseleave-mouseover-and-hover">&nbsp;jQuery Tutorial #01 Mouse Events (Click , dblClick, mouseEnter, mouseLeave, mouseOver and Hover)</a></li>
  <li><a href="https://steemit.com/utopian-io/@alexendre-maxim/create-a-loading-page-using-html5-css3-and-jquery">Create a loading page using HTML5 , CSS3 and jQuery</a></li>
  <li><a href="https://steemit.com/utopian-io/@alexendre-maxim/jquery-tutorial-02-keyboard-and-form-events-keyup-keydown-keypress-change-focus-and-blur">jQuery Tutorial #02 Keyboard and Form Events ( Keyup, Keydown, Keypress, Change, Focus and Blur)</a></li>
  <li>&nbsp;<a href="https://steemit.com/utopian-io/@alexendre-maxim/jquery-tutorial-03-form-and-document-window-events-submit-scroll-and-resize">jQuery Tutorial #03 Form and Document/Window Events (Submit, Scroll and Resize)</a></li>
</ul>
<h2>Proof of Work Done</h2>
<p>https://github.com/alexendre-maxim/jQuery-tutorial/tree/master/jQuery%20tutorial%20%2304%20Effects%20part%201</p>
</html>
๐Ÿ‘  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 23 others
properties (23)
authoralexendre-maxim
permlinkjquery-tutorial-04-effects-part-01-show-hide-toggle-fadein-fadeout-and-fadetoggle
categoryutopian-io
json_metadata{"tags":["utopian-io","video-tutorials","video","programming"],"image":["https://steemitimages.com/0x0/http://connect.adfab.fr/wp-content/uploads/2015/06/jquery-logo-1.png","https://e.top4top.net/p_959jzw062.png","https://d.top4top.net/p_959040me1.png","https://b.top4top.net/p_9595u0qw1.png","https://c.top4top.net/p_959dt0f62.png","https://img.youtube.com/vi/21hFywiCqNM/0.jpg"],"links":["https://steemitimages.com/0x0/http://connect.adfab.fr/wp-content/uploads/2015/06/jquery-logo-1.png","https://github.com/jquery/jquery","https://www.youtube.com/watch?v=21hFywiCqNM&feature=youtu.be","https://steemit.com/utopian-io/@alexendre-maxim/create-a-slideshow-using-html5-css3-and-jquery","https://steemit.com/utopian-io/@alexendre-maxim/jquery-tutorial-01-mouse-events-click-dblclick-mouseenter-mouseleave-mouseover-and-hover","https://steemit.com/utopian-io/@alexendre-maxim/create-a-loading-page-using-html5-css3-and-jquery","https://steemit.com/utopian-io/@alexendre-maxim/jquery-tutorial-02-keyboard-and-form-events-keyup-keydown-keypress-change-focus-and-blur","https://steemit.com/utopian-io/@alexendre-maxim/jquery-tutorial-03-form-and-document-window-events-submit-scroll-and-resize","https://github.com/alexendre-maxim/jQuery-tutorial/tree/master/jQuery%20tutorial%20%2304%20Effects%20part%201"],"app":"steemit/0.1","format":"html"}
created2018-08-17 13:02:54
last_update2018-08-17 13:02:54
depth0
children8
last_payout2018-08-24 13:02:54
cashout_time1969-12-31 23:59:59
total_payout_value17.668 HBD
curator_payout_value5.622 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length10,726
author_reputation18,071,828,077,109
root_title"jQuery Tutorial #04 Effects Part 01 ( Show, Hide, Toggle, FadeIn, FadeOut and FadeToggle)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id68,498,087
net_rshares17,764,744,456,264
author_curate_reward""
vote details (87)
@rosatravels ·
$8.14
Hi @alexandre-maxim,

Thank you for your contribution.

I see that you put effort to improve on your video tutorial each time.    The video tutorial seems more structured but there needs more improvement in the delivery of the tutorial.

- Try to section your tutorial in such a way that learners can clearly see when a new step is shown for the concept.  In that way, your tutorial will not be 'run-on' with continuous rambling.

- In your delivery speech, let the outline to become more distinct as you signal your learners of applying new steps.

-  Try to make some fonts larger as the smaller fonts tend to be blurry and hard on the eyes

Finally,  there are many basic concepts that are taught on the internet regarding this subject.  If you continue to teach basic concepts, you need to show where your video tutorial is unique so that learners will choose to follow to learn from your series.

I look forward to your next contribution.

Your contribution has been evaluated according to [Utopian policies and guidelines](https://join.utopian.io/guidelines), as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, [click here](https://review.utopian.io/result/9/323322223).

---- 
Need help? Write a ticket on https://support.utopian.io/. 
Chat with us on [Discord](https://discord.gg/uTyJkNm). 
[[utopian-moderator]](https://join.utopian.io/)
๐Ÿ‘  , , , , , ,
properties (23)
authorrosatravels
permlinkre-alexendre-maxim-jquery-tutorial-04-effects-part-01-show-hide-toggle-fadein-fadeout-and-fadetoggle-20180818t125605714z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"users":["alexandre-maxim"],"links":["https://join.utopian.io/guidelines","https://review.utopian.io/result/9/323322223","https://support.utopian.io/","https://discord.gg/uTyJkNm","https://join.utopian.io/"],"app":"steemit/0.1"}
created2018-08-18 12:56:12
last_update2018-08-18 12:56:12
depth1
children2
last_payout2018-08-25 12:56:12
cashout_time1969-12-31 23:59:59
total_payout_value6.124 HBD
curator_payout_value2.011 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,436
author_reputation422,827,447,688,168
root_title"jQuery Tutorial #04 Effects Part 01 ( Show, Hide, Toggle, FadeIn, FadeOut and FadeToggle)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id68,598,620
net_rshares6,116,910,268,625
author_curate_reward""
vote details (7)
@alexendre-maxim · 
Thank you for your encouragement @rosatravels, I will try to show the steps well, but for the basic concepts I am trying to present examples and ideas that exist in real websites to understand the use of these functions , I will present distinct things in the future , Thank you again.
properties (22)
authoralexendre-maxim
permlinkre-rosatravels-re-alexendre-maxim-jquery-tutorial-04-effects-part-01-show-hide-toggle-fadein-fadeout-and-fadetoggle-20180818t151905578z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"users":["rosatravels"],"app":"steemit/0.1"}
created2018-08-18 15:19:24
last_update2018-08-18 15:19:24
depth2
children0
last_payout2018-08-25 15:19:24
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length285
author_reputation18,071,828,077,109
root_title"jQuery Tutorial #04 Effects Part 01 ( Show, Hide, Toggle, FadeIn, FadeOut and FadeToggle)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id68,610,674
net_rshares0
@utopian-io · 
Thank you for your review, @rosatravels!

So far this week you've reviewed 2 contributions. Keep up the good work!
properties (22)
authorutopian-io
permlinkre-re-alexendre-maxim-jquery-tutorial-04-effects-part-01-show-hide-toggle-fadein-fadeout-and-fadetoggle-20180818t125605714z-20180820t161507z
categoryutopian-io
json_metadata"{"app": "beem/0.19.42"}"
created2018-08-20 16:15:09
last_update2018-08-20 16:15:09
depth2
children0
last_payout2018-08-27 16:15:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length114
author_reputation152,955,367,999,756
root_title"jQuery Tutorial #04 Effects Part 01 ( Show, Hide, Toggle, FadeIn, FadeOut and FadeToggle)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id68,821,116
net_rshares0
@steem-ua ·
$0.10
Hi @alexendre-maxim! We are @steem-ua, a new Steem dApp, computing UserAuthority for all accounts on Steem. We are currently in test modus upvoting quality Utopian-io contributions! Nice work!
๐Ÿ‘  ,
properties (23)
authorsteem-ua
permlinkre-jquery-tutorial-04-effects-part-01-show-hide-toggle-fadein-fadeout-and-fadetoggle-20180818t152039z
categoryutopian-io
json_metadata"{"app": "beem/0.19.54"}"
created2018-08-18 15:20:39
last_update2018-08-18 15:20:39
depth1
children1
last_payout2018-08-25 15:20:39
cashout_time1969-12-31 23:59:59
total_payout_value0.079 HBD
curator_payout_value0.021 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length192
author_reputation23,214,230,978,060
root_title"jQuery Tutorial #04 Effects Part 01 ( Show, Hide, Toggle, FadeIn, FadeOut and FadeToggle)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id68,610,795
net_rshares77,113,531,800
author_curate_reward""
vote details (2)
@alexendre-maxim · 
Thank you
properties (22)
authoralexendre-maxim
permlinkre-steem-ua-re-jquery-tutorial-04-effects-part-01-show-hide-toggle-fadein-fadeout-and-fadetoggle-20180818t152039z-20180818t153600236z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-08-18 15:36:15
last_update2018-08-18 15:36:15
depth2
children0
last_payout2018-08-25 15:36:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length9
author_reputation18,071,828,077,109
root_title"jQuery Tutorial #04 Effects Part 01 ( Show, Hide, Toggle, FadeIn, FadeOut and FadeToggle)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id68,612,258
net_rshares0
@steemitboard · 
Congratulations @alexendre-maxim! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/voted.png)](http://steemitboard.com/@alexendre-maxim) Award for the number of upvotes received

<sub>_Click on the badge to view your Board of Honor._</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



> Do you like [SteemitBoard's project](https://steemit.com/@steemitboard)? Then **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-alexendre-maxim-20180817t153751000z
categoryutopian-io
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-08-17 15:37:51
last_update2018-08-17 15:37:51
depth1
children1
last_payout2018-08-24 15:37:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length693
author_reputation38,975,615,169,260
root_title"jQuery Tutorial #04 Effects Part 01 ( Show, Hide, Toggle, FadeIn, FadeOut and FadeToggle)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id68,512,708
net_rshares0
@alexendre-maxim · 
Thank you
properties (22)
authoralexendre-maxim
permlinkre-steemitboard-steemitboard-notify-alexendre-maxim-20180818t153820803z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-08-18 15:38:33
last_update2018-08-18 15:38:33
depth2
children0
last_payout2018-08-25 15:38:33
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length9
author_reputation18,071,828,077,109
root_title"jQuery Tutorial #04 Effects Part 01 ( Show, Hide, Toggle, FadeIn, FadeOut and FadeToggle)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id68,612,468
net_rshares0
@utopian-io ·
$0.02
Hey @alexendre-maxim
 **Thanks for contributing on Utopian**.
Weโ€™re already looking forward to your next contribution!

**Want to chat? Join us on Discord https://discord.gg/h52nFrV.**

<a href='https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1'>Vote for Utopian Witness!</a>
๐Ÿ‘  ,
properties (23)
authorutopian-io
permlinkre-jquery-tutorial-04-effects-part-01-show-hide-toggle-fadein-fadeout-and-fadetoggle-20180819t193033z
categoryutopian-io
json_metadata"{"app": "beem/0.19.42"}"
created2018-08-19 19:30:33
last_update2018-08-19 19:30:33
depth1
children0
last_payout2018-08-26 19:30:33
cashout_time1969-12-31 23:59:59
total_payout_value0.016 HBD
curator_payout_value0.004 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length308
author_reputation152,955,367,999,756
root_title"jQuery Tutorial #04 Effects Part 01 ( Show, Hide, Toggle, FadeIn, FadeOut and FadeToggle)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id68,728,304
net_rshares16,326,505,322
author_curate_reward""
vote details (2)
Help/Feedback