等待 javascript 显示一个元素，然后隐藏它

Question

你好，我有一个 JQuery js，它在 AJAX 调用后执行类似的操作：

$element.next().after('<td><b>OPTION SAVED</b></td>');
$element.next().next().hide();
$element.next().next().show('slide', {direction : 'left'}, 1000);

现在我想做的是调用这个 =>

$element.next().next().next().hide("slow");

所以基本上我想动态创建一个元素，从左侧滑动它，在它出现后，我希望它再次慢慢隐藏它。我该怎么做？我的问题是，即使元素尚未完成滑动（或者可能是其创建？），也会执行 js 代码，所以当我调用 hide("slow") 时，它告诉我我在未定义上调用它，但没有任何反应...

谢谢

Answer 1

$element.next().after('<td><b>OPTION SAVED</b></td>').hide().show('slide', {direction : 'left'}, 1000, function(){$(this).hide();});

应该可以，调用的链接意味着 after 将返回您刚刚添加的元素，然后显示它并添加回调函数以再次隐藏它。

Answer 2

如果我理解你对问题的描述。您的问题是您的 next 太多。

$element.next().next().show('slide', {direction : 'left'}, 1000);

请注意，这里有 2 个 next。

$element.next().next().next().hide("slow");

然后是 3 next。 不是相同的元素。如果您想隐藏相同的元素，请从 hide 中删除 next。

或者更好的是，直接链接它：

$element.next().next()
   .show('slide', {direction : 'left'}, 1000)
   .hide("slow");

Answer 3

您应该使用回调函数：

$element.show(duration, easing, callback_function);

动画完成后将执行回调函数。

再见 ！