Question

我可能会犯这个错误，但我想让jQuery告诉HTML元素在点击时执行xyz。我能够让xyz工作，但我希望在启动新的点击后重启函数。

在这个例子中，我有一个主图像，它有缩略图。单击缩略图时，特色图像会发生变化并产生一些影响。问题在于我当前的代码，当您单击多个缩略图时，它会将click事件添加到要按顺序处理的que中。

$("div.thumb").click(function() {
    var primary_image = $(this).attr("rel");
    $('div.main-image').effect( "blind", {direction: "left" }, 500, function() {
        $('div.main-image').html('<img src="' + primary_image + '"/>');
    });
    $('div.main-image').show( "blind", {direction: "left" }, 200 );
});

实现这一目标的理想方法是什么？

JS Fiddle

Answer 1

根据文档，默认情况下queue参数设置为true。将其设置为false应解决问题

请注意，我将动画选项作为对象传递

$("div.thumb").click(function() {
    var primary_image = $(this).attr("rel");

    $('div.main-image').effect({
        effect : "blind",
        direction: "left",
        duration: 500,
        complete: function() {
            $('div.main-image').html('<img src="' + primary_image + '"/>');
        },
        queue: false
    });
    $('div.main-image').show( "blind", {direction: "left" }, 200 );
});

Answer 2

检查一下：

＆＃13;

client.Database.Migrate()

＆＃13;

$(document).ready(function() {
  $(".thumb").click(function() {
    var primary_image = $(this).attr('rel');
    $('.main-image').effect({
      effect: "blind",
      direction: "left",
      duration: 500,
      queue: false,
      complete: function() {
        $('.main-image').html('<img src="' + primary_image + '"/>').show("blind", {
          direction: "left"
        }, 500);
      }
    });
  });
});

＆＃13;

.main-image {
  text-align: center;
}

.thumb-wrapper {
  display: flex;
  margin-top: 13px;
}

.thumb {
  flex-grow: 1;
  text-align: center;
}

＆＃13;

单击事件后jQuery，中断或重置

2 个答案: