Note that there are some explanatory texts on larger screens.

plurals
  1. POAnimating Two Divs one after the other
    primarykey
    data
    text
    <p>I have a menu made up of buttons. When i hit the first button a jquery UI Tab appears opacity sets to 0.7. Then when i hit the second button in the menu i want the first UI tab opacity to change to 0 and a second UI tab to appear the same as the first one. I have 4 button in my menu so i will want this to work for each. </p> <pre><code>$(document).ready(function(){ $("#bt1").click(function(){ $("#info1").animate({opacity:'0.7'}); }); }); $(document).ready(function(){ $("#bt2").click(function(){ $("#info1").animate({opacity:'0'}); $("#info2").animate({opacity:'0.7'}); }); }); </code></pre> <p>HTML</p> <pre><code>&lt;div id="info1" class="info"&gt; &lt;div id="tabs"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#tabs-1"&gt;First&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tabs-2"&gt;Second&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tabs-3"&gt;Third&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="tabs-1"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt; &lt;div id="tabs-2"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt; &lt;div id="tabs-3"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="info2" class="info"&gt; &lt;div id="tabs"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#tabs-1"&gt;Fourth&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tabs-2"&gt;Fifth&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tabs-3"&gt;Sixth&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="tabs-1"&gt;&lt;p&gt; &lt;/p&gt;&lt;/div&gt; &lt;div id="tabs-2"&gt;&lt;p&gt; &lt;/p&gt;&lt;/div&gt; &lt;div id="tabs-3"&gt;&lt;p&gt; &lt;/p&gt;&lt;/div&gt; </code></pre> <p></p> <p>I am very new to jQuery and any help would be appreciated</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.
 

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