Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>hy</p> <p>fadings are quite easy in jquery. here a sample</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Test&lt;/title&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;js test&lt;/h1&gt; &lt;ul id="myMenu"&gt; &lt;li&gt;&lt;a href="#" data-id="tools"&gt;Tools&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" data-id="modules"&gt;Moulds&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" data-id="videos"&gt;Videos&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="subcontent" id="tools" style="display:block"&gt;tools&lt;/div&gt; &lt;div class="subcontent" id="modules"&gt;modules&lt;/div&gt; &lt;div class="subcontent" id="videos"&gt;videos&lt;/div&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $('#myMenu').on('click','a',function() { // fade out all open subcontents $('.subcontent:visible').fadeOut(); // fade in new selected subcontent $('.subcontent[id='+$(this).attr('data-id')+']').fadeIn(); }); }); &lt;/script&gt; &lt;style type="text/css"&gt; div.subcontent { display:none; } &lt;/style&gt; </code></pre> <p> </p> <p>we register a event handler with $('#myMenu').on(..) witch listens on clicks on a link element (a) and fades out first all open (visible) divs. then it starts with fading in. in this case the fade out and fade in methods starts at the same time. with a callback function you're able to call this 2 steps after each other.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload