jQuery 中的动画问题和大量 stop() 调用

Question

这就是我想做的： 我有几个带有价格的 div，以及一个具有固定最小值的滑块，我可以在其中设置最高价格。这样我就可以过滤 div，因此只有价格在滑块范围内的 div 才会显示。

没有动画就没有问题，只需 hide() 和 show()，但我试图让它顺利进行。

vehicles[0] = { id: 1, price: 100 };
vehicles[1] = { id: 2, price: 250 };
vehicles[2] = { id: 3, price: 700 };
vehicles[3] = { id: 4, price: 300 };
... 
slide: function(event, ui) {
  for (i = 0; i < vehicles.length; i++) { 
    if (vehicles[i].price > ui.value && $('#vehicle'+vehicles[i].id).data('visible') == true) { 
      $('#vehicle'+vehicles[i].id).data('visible',false).stop(true).hide('blind',500); 
    } 
    if (vehicles[i].price <= ui.value && $('#vehicle'+vehicles[i].id).data('visible') == false) { 
      $('#vehicle'+vehicles[i].id).data('visible',true).stop(true).show('blind',500); 
    } 
  } 
}
...
<div id="vehicle1">100€</div>
<div id="vehicle1">250€</div>
<div id="vehicle1">700€</div>
<div id="vehicle1">300€</div>

这是我的代码，这是我的问题：当将滑块推到一侧或一点时，它工作正常，但如果将其推到 0€ 并立即回到 700€（当 hide() 动画仍在运行时），所有 div被隐藏（但它们的数据（“可见”）设置为 true）。您可以在这里看到我的运行代码： http://work4.bywulf.de/index.php ?page=Vehicles 只需将滑块快速向左滑动，然后再向右滑动即可。

看起来 stop() 方法没有正确停止当前的“隐藏”动画，并且“显示”动画没有播放。

现在我做错了什么，还是有另一种方法来隐藏动画元素，但中途停止并再次完全显示它们？

我希望您知道我的意思以及我想做什么，谢谢您的帮助。

（jQuery 1.5，jQueryUI 1.8.9）

--Wulf

Answer 1

问题解决了，只是做了一个自己的.animation()。我认为问题是，show() 和 hide() 按原样查看项目，当项目仅显示 50% 时，它会很困难。 .animation() 将从 50% 开始并在给定尺寸处结束。所以我详细做的是：

首先我初始化了容器，因此保存了高度：

$(selector).data('visible',true)
  .data('initialHeight',$(selector).height())
  .data('initialOuterHeight',$(selector).outerHeight())
  .data('initialMarginBottom',$(selector).css('marginBottom'));

然后，当需要动画时，执行这部分：

function startAnimation(selector, show, duration) {
  $(selector).data('visible',show).stop(true);
  if (show) {
    $(selector).animate({ 
      height: $(selector).data('initialHeight'), 
      opacity: 1 , 
      marginTop: 0,
      marginBottom: $(selector).data('initialMarginBottom') 
    }, duration);
  } else {
    $(selector).animate({ 
      height: 0, 
      opacity: 0 , 
      marginTop: $(selector).data('initialHeight') - $(selector).data('initialOuterHeight'),
      marginBottom: 0 
    }, duration);
  }
}

无论如何，谢谢你的建议。

Answer 2

我建议：

if ((vehicles[i].price > priceRange || search == false || (category > 0 && vehicles[i].category != category) || ($('#availability').is(':checked') && vehicles[i].availability != 0)) && $('#vehicle'+vehicles[i].id).data('visible') == true) {
  $('#vehicle'+vehicles[i].id).data('visible',false).stop(true, true).fadeOut(function(){$(this).hide()});
}
if (vehicles[i].price <= priceRange && search == true && (category == 0 || vehicles[i].category == category) && (!$('#availability').is(':checked') || vehicles[i].availability == 0) && $('#vehicle'+vehicles[i].id).data('visible') == false) {
  $('#vehicle'+vehicles[i].id).data('visible',true).stop(true, true).show().fadeIn();
}

或者也许slideUp/slideDown有不同的效果：

if ((vehicles[i].price > priceRange || search == false || (category > 0 && vehicles[i].category != category) || ($('#availability').is(':checked') && vehicles[i].availability != 0)) && $('#vehicle'+vehicles[i].id).data('visible') == true) {
  $('#vehicle'+vehicles[i].id).data('visible',false).stop(true, true).slideUp();
}
if (vehicles[i].price <= priceRange && search == true && (category == 0 || vehicles[i].category == category) && (!$('#availability').is(':checked') || vehicles[i].availability == 0) && $('#vehicle'+vehicles[i].id).data('visible') == false) {
  $('#vehicle'+vehicles[i].id).data('visible',true).stop(true, true).slideDown();
}

show()和hide()似乎确实有问题

Answer 3

您可能遇到重入问题。

当另一个事件触发代码再次运行时，代码已经在运行。
您可以尝试这样的操作：

    function Sample(event, ui)
    {
        var running;  // prevent re-entrant code

        if (running == true)
            return;
        else
            running = true;

        // a bunch of code

        running = false;
    }

当用户最终放开滑块时，您仍然需要一种方法来确保视图同步到滑块位置。