7 Replies Latest reply on Oct 27, 2013 10:16 AM by OOlala_28

    How to use fadeToggle to fade out/in a div container?

    OOlala_28 Level 1

      Hello,

       

      I have a jQuery image thumb Slider in which each thumb is a <a>tag button that links to different div elements.

      When a user clicks on a thumb button, I would like the associated div to animate fading in and when the user clicks on another, the previous div should fade out and fade in/replace with the next.

       

      I'm brand new to jQuery and I have spent a lot of time on researching the use of this function that I'm getting confused with the MANY solutions out there.

       

      Just as an example: if I have But1, But2, But3, But4 as my thumb ids and Container1, Container2, Container3 and Container4 as the div ids.

      I started by doing this:

       

      JQUERY

      $(document).ready(function() {

         

      $("#But1").click(function(){

              $(this).fadeToggle("slow", function(){

                 $("#Container1").fadeToggle("slow"); 

              });          

          });

       

       

      $("#But2").click(function(){

              $(this).fadeToggle("slow", function(){

                 $("#Container2").fadeToggle("slow");

          }) ;            

      });

       

      $("#But3").click(function(){

              $(this).fadeToggle("slow", function(){

                 $("#Container3").fadeToggle("slow");

          }) ;            

      });

       

      $("#But4").click(function(){

              $(this).fadeToggle("slow", function(){

                 $("#Container4").fadeToggle("slow");

          }) ;            

      });

      });

       

      CSS:

      For each container:

      {

          display: none;

          width: 425px;

          height: 675px;

          position: absolute;

          left: 320px;

          top: 233px;

      }

       

      for each thumb:

      {

          position:relative;

          float: left;

          margin: 0 auto;

          display: block;

          width: 162px;

          height: 114px;

          background: url(../Images/But1.png) no-repeat 0 0;

      }

       

       

      Note: This above is just an example. I don't want to use the "+1" function in jQuery, it will not work because all my id names are  specific to its subject.

      Not sure if I'm going about this the right way. I'm also missing the fade out effect in the code which I need I'm thinking.

       

      Could any of you PLEASE point me in the right direction?

       

      Thank you!!!

        • 1. Re: How to use fadeToggle to fade out/in a div container?
          Nancy OShea Adobe Community Professional & MVP

          jQuery fading divs

          http://jsfiddle.net/NancyO/Jbsrx/

           

           

          Nancy O.

          1 person found this helpful
          • 2. Re: How to use fadeToggle to fade out/in a div container?
            OOlala_28 Level 1

            Thanks Nancy, I'll try that.

            One more thing...

            Are we allowed to only use id names in jQuery or can we also use class names?

             

            Thanks again!

            • 3. Re: How to use fadeToggle to fade out/in a div container?
              Nancy OShea Adobe Community Professional & MVP

              Yes you can use classes in jQuery.  It will effect all elements with that classname.

               

              Nancy O.

              • 4. Re: How to use fadeToggle to fade out/in a div container?
                OOlala_28 Level 1

                Hi,

                 

                The div classes are still not showing up.

                Is the trick in the amount I put in for the z-index for each div container?

                 

                Thanks!

                • 5. Re: How to use fadeToggle to fade out/in a div container?
                  Nancy OShea Adobe Community Professional & MVP

                  Is this what you're trying to do?

                  http://jsfiddle.net/NancyO/AP9Hm/

                   

                   

                  Nancy O.

                  1 person found this helpful
                  • 6. Re: How to use fadeToggle to fade out/in a div container?
                    OOlala_28 Level 1

                    I tried playing with the z-index values and still no go.

                     

                    I feel like I'm missing something i'm  the code but I don't know what.

                     

                    Below is what I have so far:

                     

                    CSS

                    Slider

                    #aemcSlider

                    {

                        list-style:none;

                        margin-left: 289px;

                        width: 474px;

                        height: 97px;

                        top: 134px;

                        position: absolute;

                        overflow: hidden;

                        left: -3px;

                    }

                     

                    #aemcSlider a {margin-right: -4px;}

                     

                    #aemcPkgContainer

                    {

                        z-index:1;

                        width: 425px;

                        height: 675px;

                        position: absolute;

                        left: 320px;

                        top: 233px;

                    }

                     

                    #aemcGroundAdContainer

                    {

                        z-index:2;   

                        display: none;

                        width: 425px;

                        height: 675px;

                        position: absolute;

                        left: 320px;

                        top: 233px;

                    }

                     

                    #aemcClampOnAdContainer

                    {

                        z-index:3;   

                        display: none;

                        width: 425px;

                        height: 675px;

                        position: absolute;

                        left: 320px;

                        top: 233px;

                    }

                     

                    #aemcMetrixContainer

                    {

                        z-index:4;   

                        display: none;

                        width: 425px;

                        height: 675px;

                        position: absolute;

                        left: 320px;

                        top: 233px;

                    }

                     

                    Buttons

                    //4 buttons like this//

                    a.aemcGroundFlexBut

                    {

                        position:relative;

                        float: left;

                        margin: 0 auto;

                        display: block;

                        width: 162px;

                        height: 114px;

                        background: url(../Images/AEMC_AD_6472-74.png) no-repeat 0 0;

                    }

                    a.aemcGroundFlexBut:hover

                    {

                    background-position: 0 -114px;

                    }

                     

                     

                    HTML

                    Jquery Slider

                    <div id="aemcSlider">

                        <ul>

                        <li>

                             <a id="aemcPkg" class="aemcPkgBut" href="#"> </a>

                          </li>

                           

                            <li>

                             <a id="aemcGroundFlex" class="aemcGroundFlexBut" href="#"> </a>

                          </li>

                            

                              <li>

                          <a id="aemcClamp" class="aemcClampBut" href="#"> </a>

                          </li>

                     

                    <li>

                    <a id="aemcMetrix" class="aemcMetrixBut" href="#"> </a>

                    </li>

                     

                    </ul>

                    </div>

                     

                    Containers:

                     

                    <div id="aemcPkgContainer">

                    <div class="workImage"><img src="Images/AEMC_packaging_image.png" alt="Packaging" width="295"  hspace="0" vspace="0" border="0" title="Packaging"/>

                    </div>

                    </div>

                     

                    <div id="aemcGroundAdContainer">

                    <div class="workImage"><img src="Images/AD_F_UP_6472_74_Image.png" alt="Packaging" width="295"  hspace="0" vspace="0" border="0" title="Packaging"/>

                    </div>

                    </div>

                     

                    <div id="aemcClampOnAdContainer">

                    <div class="workImage"><img src="Images/AD_F_ECM_3711-31-NEW-PRICE_0708.png" alt="Packaging" width="295"  hspace="0" vspace="0" border="0" title="Packaging"/>

                    </div>

                    </div>

                     

                     

                    <div id="aemcMetrixContainer">

                    <div class="workImage"><img src="Images/AD_H_NETA_MTX-Digital-Multimeters_H_Image.png" alt="Packaging" width="295"  hspace="0" vspace="0" border="0" title="Packaging"/>

                    </div>

                    </div>

                     

                     

                    JS:

                     

                    // JavaScript Document

                     

                    $(document).ready(function() {

                       

                    $("#aemcPkg").click(function(){

                            $("#aemcGroundAdContainer").fadeOut(2500);

                            $("#aemcClampOnAdContainer").fadeOut(2500);

                            $("#aemcMetrixContainer").fadeOut(2500);

                            $("#aemcPkgContainer").fadeIn(2500);

                    });          

                     

                    $("#aemcGroundFlex").click(function(){

                            $("#aemcPkgContainer").fadeOut(2500);

                            $("#aemcClampOnAdContainer").fadeOut(2500);

                            $("#aemcMetrixContainer").fadeOut(2500);

                            $("#aemcGroundAdContainer").fadeIn(2500);

                    });

                     

                    $("#aemcClamp").click(function(){

                            $("#aemcPkgContainer").fadeOut(2500);

                            $("#aemcGroundAdContainer").fadeOut(2500);

                            $("#aemcMetrixContainer").fadeOut(2500);

                            $("#aemcClampOnAdContainer").fadeIn(2500);           

                    });

                     

                    $("#aemcMetrix").click(function(){

                            $("#aemcPkgContainer").fadeOut(2500);

                            $("#aemcGroundAdContainer").fadeOut(2500);

                            $("#aemcClampOnAdContainer").fadeOut(2500);

                            $("#aemcMetrixContainer").fadeIn(2500);   

                    });

                    });

                     

                    I'm using <a> tag buttons ...could that be the problem?

                     

                    Any help would be much appreciated.

                     

                    thank you!

                    • 7. Re: How to use fadeToggle to fade out/in a div container?
                      OOlala_28 Level 1

                      No, the original code you gave me should work and can't seem to figure what the problem might be.