-1

我正在使用带有淡入和淡出的悬停功能来显示和隐藏图像。问题是我希望每个图像在另一个开始淡入之前完成淡入淡出。

这就是我正在尝试的。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

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

4

2 回答 2

0

jQuery 函数fadeIn和fadeOut都有一个回调参数，在动画结束时触发，所以你可以在动画结束时挂钩fadeInfor current image 调用fadeOut。

但是：首先在单个图像上尝试这个；一旦你让它工作，尝试在一个函数中重写它，你可以调用每个图像。记住 DRY 原则：不要重复自己。

编辑：我的意思是：当将鼠标悬停在图像 A“悬停检测器”上时，该函数应首先淡出当前可见的图像 B（您可以使用:visiblejQuery 选择器获得），当淡出动画完成时，它将调用淡入图像 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
于 2012-12-02T20:29:44.390 回答
0

我认为你需要的是这样的东西。（在此示例中，您还需要将悬停图像设置为 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();​
于 2012-12-02T21:29:57.297 回答