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>

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

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

现在我做错了什么，或者是否有另一种隐藏动画元素的方法，但是将它们中途停止并再次显示它们？

我希望你知道我的意思和我想做的事情，谢谢你的帮助。

（jQuery 1.5，jQueryUI 1.8.9）

- 沃尔夫

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

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

动画问题和jQuery中的很多stop（）调用

3 个答案: