JQuery Single Page Fade In/Out Toggle w/Nav

Question

Dudes! Долгий рыцарь. Первый вопрос.

Простая страница с навигационным меню, запускающим дефрагментацию содержимого div. Fade-in on click function, fade-out if toggle-target! = Href ("#"). Сценарий работает, но это работа. Здесь должен быть более простой метод.

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> 

Есть ли способ, чтобы одна функция класса тумблер, и если A HREF == #div, нарастающий? Иначе, исчезают?

Для ясности я не хочу, чтобы пользователь исчезал fadeToggle при втором щелчке одной и той же навигационной цели. Только если выбрана новая цель, текущее исчезновение div.

Спасибо, люди!

Answer 1

Это мое решение. Это не совсем ваше решение, которое вы ищете, но я уверен, что вы можете изменить его, чтобы сделать то, что вы хотите, чтобы концепция была там. Вы также можете установить .data в элементе, чтобы узнать, уже ли этот элемент уже исчез.

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

Мое предложение:

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

Вы можете использовать атрибут начинается с селектором, .filter(), .stop(), if условие для проверки элемента opacity перед выполнением анимации

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