Question

完全初学者所以我可能会遗漏一些显而易见的东西...... 我似乎无法将animate（宽度）效果与this.hide效果结合起来，我可以通过注释另一个来使任一个工作。这是代码：

function showSlidingDiv(column){
var maxWidth = 200;
var smallWidth = 80;
var myWidth = $(column).width();


$("div").each(function(){
        $(this).animate({width: smallWidth});
        $(this).hide();
     });

$(column).show();
$(column).animate({width: maxWidth});
}

我在大型信息表上使用它，以便用户可以单击第一个标题并展开该列信息，同时减少所有其他信息。每个td内部都有一个正在扩展或收缩的div。我想在动画中同时隐藏其他列中的div。就像我说的，这将适用于其中一种，但不能同时使用。

任何帮助表示赞赏。感谢。

Answer 1

.hide()不是排队功能，您需要在.animate()回调中调用它，如下所示：

$("div").animate({width: smallWidth}, function() {
  $(this).hide();
});

或者使用这个技巧使其成为排队函数：

$("div").animate({width: smallWidth}).hide(0);

在任何一种情况下都不需要.each()，因为上述代码也适用于所有匹配。

Answer 2

只需使用回调函数。喜欢：

function showSlidingDiv(column) {
  var maxWidth = 200;
  var smallWidth = 80;
  var myWidth = $(column).width();


  $("div").each(function() {
    $(this).animate({width: smallWidth}, 1000, function() {
      // this callback is executed when the animation is done
      $(this).hide();
    });
  });

  $(column).show();
  $(column).animate({width: maxWidth});
}

Answer 3

jQuery animate函数可以与动画完成后运行的回调函数一起使用，这应该可以完成你想要做的事情。

$("div").each(function(){
    $(this).animate({width: smallWidth}, 1000, function() {
       $(this).hide();
    });
 });

Answer 4

问题是只有动画方法被链接（一个接一个）。要使hide()成为动画方法，您必须指定持续时间，而不是

    $(this).animate({width: smallWidth});
    $(this).hide();

写

    $(this).animate({width: smallWidth});
    $(this).hide(0);

或更短

    $(this).animate({width: smallWidth}).hide(0);

JQuery - 结合宽度和隐藏效果

4 个答案: