JQuery 单页淡入/淡出切换 w/Nav

Posted 2023-05-08

【中文标题】JQuery 单页淡入/淡出切换 w/Nav

【英文标题】：JQuery Single Page Fade In/Out Toggle w/Nav

【发布时间】：2016-12-15 21:05:39

【问题描述】：

伙计们！长期潜伏者。第一个问题。

带有导航菜单触发淡入内容 div 的简单页面。点击功能淡入，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效果淡出。

谢谢各位！

【参考方案1】：

您可以使用以选择器开头的属性、.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>

【讨论】：

D@mn！而已！完美的。点击时淡入，只有点击离开时才会淡出。非常感谢！非常简单。

【参考方案2】：

这将是我的淡化解决方案。这不完全是您正在寻找的解决方案，但我相信您可以将其更改为您想要的概念。您还可以在元素上设置 .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>

【参考方案3】：

我的建议是：

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

【讨论】：

这是我的错。应该在我的帖子中添加“内容”div。这个想法是点击功能淡入导航下方的内容目标 - 不淡化导航选择本身。 @guest271314 版本是我所追求的。感谢您加入！