Question

我正在使用淡入淡出功能，淡入淡出以显示和隐藏图像。问题是我希望每个图像在另一个图像开始淡入之前完成淡化。

这就是我正在尝试的。 setTimeout函数打破了悬停功能，并在页面加载时显示所有图像。

  $(document).ready(function() {
  var delay = 0;

  //Everything below repeats for each image 

  $("#image_e_natural_minor").hide();

  $("#hover_e_natural_minor").hover(
      if (delay == 1) {
      setTimeout(function() {
      function () {
        $("#image_e_natural_minor").fadeIn(1000);
      }, //mouse over
      function () {
        $("#image_e_natural_minor").fadeOut(1000);
        delay = 0;
      } //mouse out
    );  //hover close
    },1000); // delay time
  }
  else {
  $("#hover_e_natural_minor").hover(
    function () {
      delay = 1;
      $("#image_e_natural_minor").fadeIn(1000);
    }, //mouse over
    function () {
      $("#image_e_natural_minor").fadeOut(1000);
      delay = 0;
    } //mouse out
    );  //hover close
  }

这是我之前的工作，但它会同时显示两个图像。

  $("#image_e_natural_minor").hide();
  $("#hover_e_natural_minor").hover(
    function () {
      $("#image_e_natural_minor").fadeIn(1000);
    }, //mouse over
    function () {
      $("#image_e_natural_minor").fadeOut(1000);
    } //mouse out
    );  //hover close

  $("#image_e_harmonic_minor").hide();
  $("#hover_e_harmonic_minor").hover(
    function () {
          $("#image_e_harmonic_minor").fadeIn(1000);
    }, //mouse over
    function () {
      $("#image_e_harmonic_minor").fadeOut(1000);
    } //mouse out
    ); //hover close

抱歉语法不好。我对编程很新。

Answer 1

jQuery函数fadeIn和fadeOut都有一个回调参数，在动画结束时触发，因此您可以在fadeIn时挂接当前图像调用的fadeOut饰面。

但是：首先在单张图片上尝试此操作;一旦你工作了，试着在一个你可以调用每个图像的函数中重写它。记住DRY原则：不要重复自己。

编辑：我的意思是：当将鼠标悬停在图像A'悬停检测器'上时，该函数首先应淡出当前可见的图像B（您可以使用:visible的jQuery选择器获得）并且当fadeOut动画完成时它将调用图像A的淡入淡出（你提供了抛出回调参数）：

$("#image_e_natural_minor").hide();
$("#hover_e_natural_minor").hover(
    function () {
        $(".myImageClass:visible").fadeOut(1000, function(){$("#image_e_natural_minor").fadeIn(1000)});
    }, //mouse over
    function () {
        $("#image_e_natural_minor").fadeOut(1000);
    } //mouse out
);  //hover close

再次：尝试使用单个图片，然后将其重写为：

$("#image_e_natural_minor").hide();
$("#hover_e_natural_minor").hover(
    function(){showThis('#image_e_natural_minor')}, //mouse over
    function(){hideThis('#image_e_natural_minor')} //mouse out
);  //hover close

Answer 2

我认为你需要的是this。（在此示例中，您还需要将悬停图像设置为class ='hoverI'。）

var delayF = false,
    mouseOn = null;
function setHandlers() {
    $(".hoverI").hover(function() {
        mouseOn = $('#' + event.target.id.replace('hover_e', 'image_e'));
        if (!delayF) {
            mouseOn.fadeIn(1000);
            mouseOn = null;
        }
    }, function() {
        var image = $('#' + event.target.id.replace('hover_e', 'image_e'));
        if (mouseOn == image) mouseOn = null;
        delayF = true;
        image.fadeOut(1000, function() {
            delayF = false;
            if (mouseOn) {
                mouseOn.fadeIn(1000);
                mouseOn = null;
            }
        });
    });
}
$("#image_e_natural_minor").hide();
$("#image_e_harmonic_minor").hide();
setHandlers();

使用setTimeout一次显示一个图像

2 个答案: