Question

嘿伙计们，我只是为了好玩而创建自己的网站，下面的代码会显示一些形状列表。有没有人知道如何合并另一个按钮而不是fadeOut代码，以便当我点击另一个按钮时，一个＆＃34;隐藏菜单＆＃34;按钮。形状将淡出。这是因为我现在的代码意味着形状会随着时间的推移逐渐淡出。请帮助！

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1aside").fadeIn(100);
    $("#div2aside").fadeIn(200);
    $("#div3aside").fadeIn(300);
    $("#div4aside").fadeIn(400);
    $("#div5aside").fadeIn(500);
    $("#div6aside").fadeIn(600);
    $("#div7aside").fadeIn(700);
    $("#div8aside").fadeIn(800);
    $("#div9aside").fadeIn(900);
    $("#div10aside").fadeIn(1000);
    $("#div11aside").fadeIn(1100);
    $("#div12aside").fadeIn(1200);
    $("#div13aside").fadeIn(1300);
    $("#div14aside").fadeIn(1400);
    $("#div15aside").fadeIn(1500);
    $("#div16aside").fadeIn(1600);
    $("#div17aside").fadeIn(1700);
    $("#div18aside").fadeIn(1800);
    $("#div1aside").fadeOut(17670);
    $("#div2aside").fadeOut(17660);
    $("#div3aside").fadeOut(17650);
    $("#div4aside").fadeOut(17640);
    $("#div5aside").fadeOut(17630);
    $("#div6aside").fadeOut(17620);
    $("#div7aside").fadeOut(17610);
    $("#div8aside").fadeOut(17600);
    $("#div9aside").fadeOut(17590);
    $("#div10aside").fadeOut(17580);
    $("#div11aside").fadeOut(17570);
    $("#div12aside").fadeOut(17560);
    $("#div13aside").fadeOut(17550);
    $("#div14aside").fadeOut(17540);
    $("#div15aside").fadeOut(17530);
    $("#div16aside").fadeOut(17520);
    $("#div17aside").fadeOut(17510);
    $("#div18aside").fadeOut(17500);
    $("section").fadeOut(0);
  });
});
</script>

Answer 1

如果我理解你的问题，你应该做一个切换，我发现这是最简单的方法：

$(document).ready(function(){
   var toggle = 0;
   $("button").click(function(){
      if (toggle === 0) {
       $("#yourDivsToFadeIn").fadeIn(YourTimeToFadeIn);
       toggle = 1;
      }
      else if (toggle === 1) {
       $("#yourDivsToFadeOut").fadeOut(YourTimeToFadeOut);
       toggle = 0;
      }
   });
});

编辑：你也可以使用：

$(document).ready(function() {
    $("button").click(function() {
       $("#YourDivsIds").fadeToggle(YourTimeToToggleTheFade);
    });
});

但是我找到了更好地做到这一点的第一种方法，因为如果你开始学习更多的Javascript / jQuery，那么总是有.toggle方法来切换一些东西。然后你最好学习 - 并习惯 - 第一种方法。 - 但这只是我的观点。

Answer 2

首先，HTML中需要两个按钮：

<button id="infader">Fade all in</button>
<button id="outfader">Fade all out</button>

然后在你的JS中，首先用一个jQuery选择器选择要淡化的所有div，并将它们存储在一个变量中。它更快，写得更少，不同衰落时间的附加变得更容易。

// get all divs with an ID that ends with 'aside'
var asides = $("div[id$='aside']");

// get first button and attach the click-handler
$("#infader").click(function() {
    // take all asides and use 'each() to execute a function on each of them
    // keyword 'this' is one div-element, i is it's index in the collection
    asides.each(function(i) {
        // the divs gets a fading time depending on their index
        // the first (i == 0) gets 100ms, the last (i == 17) gets 1800ms
        $(this).stop().fadeIn((i + 1) * 100);
    });
});
// get second button similar
$("#outfader").click(function() {
    asides.each(function(i) {
        $(this).stop().fadeOut((17 - i) * 10 + 17500);
    });
});

.stop()之前的fade是什么？假设您已经启动了淡入淡出，然后在完成之前单击外出按钮。现在fadeIn已停止，fadeOut立即开始。如果你想在fadeOut运行之前完全完成fadeIn，只需删除.stop()。它很容易改变淡入淡出时间以满足您的需求。

fadeIn和FadeOut的html按钮

2 个答案: