Question

在jquery上非常新，但是我想要在悬停在按钮上时在背景之间淡化（在这种情况下，在父div中容纳多个替代div）。我当前的代码在这方面是有用的，但只是将鼠标悬停在按钮上，然后鼠标悬停。但是，如果你从一个按钮直接转到另一个按钮而没有留出，它会打破悬停并且会抛出按钮调用各自div的顺序。

任何人都可以通过这些元素之间的无缝淡入/淡出来帮助我吗？如果它们更有效率，我会对其他方法持开放态度（任何干涸我的业余代码的帮助都会非常出色）。

这是我的代码：

＆＃13;

$(document).ready(function() {

  $('#b1').hover(function() {
    if ($('.int').is(":visible")) {
      $('.int').fadeOut(300);

    } else {
      $("#i1").fadeIn(1000)
    }

  });

  $('#b2').hover(function() {
    if ($('.int').is(":visible")) {
      $('.int').fadeOut(300);

    } else {
      $("#i2").fadeIn(1000)
    }

  });

  $('#b3').hover(function() {
    if ($('.int').is(":visible")) {
      $('.int').fadeOut(300);

    } else {
      $("#i3").fadeIn(1000)
    }

  });



});

＆＃13;

    .hold {
      background: green;
      width: 100%;
      height: 100vh;
      margin: 0 auto;
      float: left;
      position: absolute;
      z-index: 0;
    }
    .int {
      width: 100%;
      height: 100vh;
      float: left;
      display: none;
    }
    #i1 {
      background: red;
    }
    #i2 {
      background: blue;
    }
    #i3 {
      background: orange;
    }
    #b1 {
      background: purple;
      height: 50px;
      width: 80px;
      float: left;
    }
    #b2 {
      background: purple;
      height: 50px;
      width: 80px;
      float: left;
    }
    #b3 {
      background: purple;
      height: 50px;
      width: 80px;
      float: left;
    }
    .banner {
      width: 100%;
      height: 70px;
      background: purple;
      margin: 0px auto;
      z-index: 3;
      float: left;
      display: inline-block;
      position: absolute;
      bottom: 15px;
    }
    * {
      margin: 0;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <div class="banner">
    <button id="b1">
    </button>
    <button id="b2">
    </button>
    <button id="b3">
    </button>
  </div>

  <div class="hold" id="hold1">
    <div class="int" id="i1">
    </div>
    <div class="int" id="i2">
    </div>
    <div class="int" id="i3">
    </div>
  </div>

＆＃13;

提前感谢您的帮助！

Answer 1

我不能100％确定这种效果是否符合您的要求。如下所示，fadeOut发生，然后立即由新颜色的fadeIn继承。无论如何，检查一下，看看它是否有帮助。

将这些自定义HTML属性添加到按钮中。

<button id="b1" data-intId="#i1"></button>
<button id="b2" data-intId="#i2"></button>
<button id="b3" data-intId="#i3"></button>

然后，按如下所示修改您的JavaScript

<script>
$(document).ready(function() {

    var ints = $('.int'); // I'm not really sure what 'int' refers to
    var buttons = $('button'); // could be changed if more buttons added later, maybe using a class, like int

    buttons.mouseenter(function () {
        var newInt = $(this).attr('data-intId');
        $(newInt).fadeIn(1000);
    });

    buttons.mouseout(function() {
        if (ints.is(":visible")) {
            ints.fadeOut(300);
        }
    })

});

关于干扰代码的一些注意事项（您将在上面的注释中看到） - 首先尝试将任何重要的，经常重复的选择器保存为变量。这不仅可以帮助您编写，而且在性能方面也更便宜。每当你发送你的小jQuery妖精*以在DOM树中找到一个选择器时，它就会耗尽资源。如果你可以立即找到你需要的东西，那么存储这些元素，它会好得多。

此外，我借此机会使用HTML的data- *属性，您可以完全按照自己的意愿创建。在这里，我创建了一个包含你想要带来的div的ID。

如果要对您的命名更具描述性，请向我提出最后一条建议。像＆＃39; int＆＃39;，＆＃39; i1＆＃39;和＆＃39; b1＆＃39;对于这些情况可能没什么问题，但是一旦你的项目增长或者其他人也在使用它，你可能会浪费很多时间来弄清楚你所谓的东西以及为什么。

* jQuery leprechaun当然不是一个官方术语（据我所知），它只是自发地来找我。另请注意，我不是jQuery专家，我几个月前才开始。

Answer 2

您可以使用带选择器的属性启动，属性等于选择器.finish()，.filter()，String.prototype.slice()

  $("[id^=b]").hover(function() {
    $("[id^=i]").finish().filter("[id=i" + this.id.slice(-1) + "]").fadeIn(1000)
  }, function() {
    $("[id^=i]").finish().fadeOut(1000)
  })

$(document).ready(function() {

  $("[id^=b]").hover(function() {
    $("[id^=i]").finish().filter("[id=i" + this.id.slice(-1) + "]").fadeIn(1000)
  }, function() {
    $("[id^=i]").finish().fadeOut(1000)
  })


});

.hold {
  background: green;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  float: left;
  position: absolute;
  z-index: 0;
}
.int {
  width: 100%;
  height: 100vh;
  float: left;
  display: none;
}
#i1 {
  background: red;
}
#i2 {
  background: blue;
}
#i3 {
  background: orange;
}
#b1 {
  background: purple;
  height: 50px;
  width: 80px;
  float: left;
}
#b2 {
  background: purple;
  height: 50px;
  width: 80px;
  float: left;
}
#b3 {
  background: purple;
  height: 50px;
  width: 80px;
  float: left;
}
.banner {
  width: 100%;
  height: 70px;
  background: purple;
  margin: 0px auto;
  z-index: 3;
  float: left;
  display: inline-block;
  position: absolute;
  bottom: 15px;
}
* {
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <div class="banner">
    <button id="b1">
    </button>
    <button id="b2">
    </button>
    <button id="b3">
    </button>
  </div>

  <div class="hold" id="hold1">
    <div class="int" id="i1">
    </div>
    <div class="int" id="i2">
    </div>
    <div class="int" id="i3">
    </div>
  </div>

悬停时多个元素之间的无缝淡入淡出（jquery）

2 个答案: