Commutateur Fade In/Out à une seule page JQuery avec Nav

Question

Dudes! Lurker de longue date. Première question.

Page simple avec menu nav déclenchant le div. Fade-in sur la fonction click, fade-out si toggle-target! = Href ("#"). Script fonctionne, mais c'est un travail autour. Il doit y avoir une méthode plus simple ici.

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> 

Est-il possible d'avoir une fonction de classe à bascule, et si le a href == #div, fade-in? Sinon, disparaître?

Pour plus de clarté, je ne veux pas que l'utilisateur fade-out fadeToggle lors d'un second clic sur la même cible de navigation. Ce n'est que si une nouvelle cible est sélectionnée que la div actuelle disparaît.

Merci, les gens!

Answer 1

Ce serait ma solution de fondu. Ce n'est pas exactement la solution que vous cherchez, mais je suis sûr que vous pouvez le changer pour faire ce que vous voulez que le concept soit là. Vous pouvez également définir .data sur l'élément pour savoir si cet élément est déjà passé.

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>

Answer 2

Ma proposition est la suivante:

$(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>

Answer 3

Vous pouvez utiliser l'attribut commence avec le sélecteur, .filter(), .stop(), if état pour vérifier élément opacity avant de procéder à l'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>