Question

这是功能：

$('.popoutlink').on('click', function() {
   var box = $('#' + $(this).data('box'));
   box.siblings().hide();
   box.toggle("slide", { direction: "left" }, 500);
   box.siblings().hide();
});

这两个siblings.hide陈述是因为我正在试图找出为什么我在屏幕上留下两个幻灯片，如果我快速连续点击两个按钮。

html是：

<div class="col-md-2">
    <div class="popoutlink" data-box="p1">1</div>
    <div class="popoutlink" data-box="p2">2</div>
    <div class="popoutlink" data-box="p3">3</div>
    <div class="popoutlink" data-box="p4">4</div>
    <div class="popoutlink" data-box="p5">5</div>
</div>

<div class="col-md-10 bb" style="height: 400px;">
    <div class="popout" id="p1"><h1>panel 1</h1></div>
    <div class="popout" id="p2">
        <h1>panel 2</h1>  
    </div>

如果我快速点击两个按钮，屏幕上会留下两个窗口。我希望兄弟姐妹在选定的div出现之前隐藏。

我尝试过使用promise.done()：

box.siblings().hide(200).promise().done(function(){
    box.toggle("slide", { direction: "left" }, 500);
});

无效。将box.toggle添加到hide作为回调：

box.siblings().hide(200, function(){
    box.toggle("slide", { direction: "left" }, 500);
});

非常有趣但没用。

无论我多快点击按钮，如何在显示所选div之前让兄弟姐妹可靠地离开？

您see it here只需快速点击带编号的框

由于

Answer 1

如果我理解你的问题，这应该会有所帮助：

https://jsfiddle.net/Twisty/3mbh5p0r/

jQuery UI

$(function() {
  $('.popoutlink').on('click', function() {
    var box = $('#' + $(this).data('box'));
    $(".popout").hide();
    //box.siblings().hide();
    box.toggle("slide", {
      direction: "left"
    }, 500);
    //box.siblings().hide();
  });
});

当点击任何“链接”时，它们都被隐藏，然后只有被点击的人被切换。

<强>更新

对.hide()与.css("display", "none")的更多测试表明，更改CSS是一种更快的方法。这个页面讨论了它是如何立即，但我发现它没有那么快。

匹配的元素将立即隐藏，无动画。这大致相当于调用.css（“display”，“none”），除了显示属性的值保存在jQuery中数据缓存，以便以后可以将显示恢复到其初始值。如果元素的显示值为内联并隐藏，则显示，它将再次以内联方式显示。

和

请注意，.hide（）会立即触发并覆盖动画如果没有指定持续时间或持续时间为0，则排队。

我确实尝试使用回调，这让它变得更糟。隐藏动画完成时应该触发回调，但它添加了动画隐藏操作的元素。即使速度为0，它也会变慢。

所以我建议：

$(function() {
  $('.popoutlink').on('click', function() {
    $(".popout").css("display", "none");
    $('#' + $(this).data('box')).show("fast");
  });
});

兄弟姐妹没有藏在jqueryui幻灯片上

1 个答案: