动画问题和jQuery中的大量stop（）调用

Question

这是我要执行的操作：我有几个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>

那是我的代码，这是我的问题：将滑块推到一侧或指向一点时，它可以正常工作，但是fe将其推到0€并立即回到700€（而hide（）动画仍在运行），所有div隐藏（但其data（'visible'）设置为true）。 您可以在此处查看我的运行代码： http : //work4.bywulf.de/index.php? page = Vehicles只需将滑块向左快速滑动并向右滑动即可。

看起来stop（）方法没有正确停止其当前的“隐藏”动画，并且“ show”动画没有播放。

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

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

（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;
    }

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