CODEWITHSUNDEEP
javascriptjqueryfadeinfadeout
jmossotti
jmossotti

Reputation: 11

JQuery Single Page Fade In/Out Toggle w/Nav

Dudes! Longtime lurker. First question.

Simple page with nav menu triggering fade-in content div. Fade-in on click function, fade-out if toggle-target != href("#"). Script works, but this is a work around. There has to be a simpler method here.

JS:

$(document).ready(function(){   

$(".toggle1").click(function(){   

    $('#div1').delay(500).fadeIn('fast');
    $('#div2').fadeOut('slow');
    $('#div3').fadeOut('slow');

});

$(".toggle2").click(function(){   

    $('#div2').delay(500).fadeIn('fast');
    $('#div1').fadeOut('slow');
    $('#div3').fadeOut('slow');

});

$(".toggle3").click(function(){   

    $('#div3').delay(500).fadeIn('fast');
    $('#div1').fadeOut('slow');
    $('#div2').fadeOut('slow');

    });
});

HTML:

    <div class="nav">
        <ul>
            <li><a class="toggle1" href="#div1">div1</a></li>
            <li><a class="toggle2" href="#div2">div2</a></li>
            <li><a class="toggle3" href="#div3">div3</a></li>           
         </ul>
    </div>

Is there a way to have ONE toggle class function, and if the a href == #div, fade-in? Else, fade-out?

For clarity, I don't want the user to fade-out fadeToggle on second click of the same nav target. Only if a new target is selected, does the current div fade-out.

Thanks, people!

Upvotes: 0

Views: 272

Answers (3)

guest271314
guest271314

Reputation: 1

You can use attribute begins with selector, .filter(), .stop(), if condition to check for element opacity before proceeding with animation

$().ready(function() {
  $("[class^=toggle]").click(function(e) {
    e.preventDefault();
    var hash = $("#" + this.href.split(/#/).pop());
    if (hash.css("opacity") < 1) {
      $("[id^=div]").stop().fadeTo("fast", 0)
      .filter(hash).delay(500).fadeTo("slow", 1)
    }
  })
})
[id^="div"] {
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="nav">
  <ul>
    <li><a class="toggle1" href="#div1">div1</a>
    </li>
    <li><a class="toggle2" href="#div2">div2</a>
    </li>
    <li><a class="toggle3" href="#div3">div3</a>
    </li>
  </ul>
</div>
<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>

Upvotes: 1

gaetanoM
gaetanoM

Reputation: 42044

My proposal is:

$(function () {
  $('[href^="#div"]').click(function () {
    $(this).delay(500).fadeIn('fast');
    var siblings = $(this).parent().siblings();
    $('[href="' + siblings.eq(0).children('a').attr("href") + '"]').fadeOut('slow', function() {
      $('[href="' + siblings.eq(1).children('a').attr("href") + '"]').fadeOut('slow');
    });
  });
  
  $('#btn').on('click', function(e) {
    $('[href^="#div"]').show();
  });
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div class="nav">
    <ul>
        <li><a class="toggle1" href="#div1">div1</a></li>
        <li><a class="toggle2" href="#div2">div2</a></li>
        <li><a class="toggle3" href="#div3">div3</a></li>
    </ul>
</div>

<button id="btn">Make visible all elements</button>

Upvotes: 0

JQluv
JQluv

Reputation: 242

This would be my fade solution. This is not exactly your solution you are looking for but i'm sure you can change it to do what you want the concept is there. You could also set .data on the element to know if that element is already faded.

https://api.jquery.com/jquery.data/ 

$(document).ready(function(){   
  $(".toggle1").click(function() {
      href = $(this).attr("href");
      if(href.includes("#div")) {
        $('a[href=#div1]').delay(500).fadeIn('fast');
        $('a[href=#div2]').fadeOut('slow');
        $('a[href=#div3]').fadeOut('slow');
      }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
        <ul>
            <li><a class="toggle1" href="#div1">div1</a></li>
            <li><a class="toggle2" href="#div2">div2</a></li>
            <li><a class="toggle3" href="#div3">div3</a></li>           
         </ul>
    </div>
<div id="fademe">
testing  
</div>

Upvotes: 0

Related Questions