Question

我正在使用jQuery Tool的标签手风琴，如下所示：http://www.jquerytools.org/demos/tabs/accordion.htm

整个事情都是用

激活的

代码：

$("#accordion").tabs(
  "#accordion div.pane",
  {tabs: 'h2', effect: 'slide', initialIndex: null}
);

虽然使用滑动功能显示了窗格的内容，但在我的设置中，我希望只有在幻灯片动画完成后才能显示窗格中的图像，并且应该再次隐藏当前选项卡的图像只要点击手风琴标题。我已经摆弄，但无法让它发挥作用。

我想把图像设置为display：none;然后在显示其余内容后将其更改为显示？

我可以通过在上面的代码中添加一些东西吗？非常感谢

Answer 1

我想你会想做一个自定义动画。它应该非常直接。

  $.tools.tabs.addEffect("custom", function(tabIndex, done) {

  // hide any images
  $("#accordion img").hide();

  // hide all panes and show the one that is clicked, on complete show images
  this.getPanes().hide().eq(tabIndex).show('fast',function(){
      //show the images again now that the animation has finished
      $("#accordion img").show();
  });

  // the supplied callback must be called after the effect has finished its job
  done.call();
  });

然后你可以用'custom'替换动画效果'slide'。

Answer 2

我想把图像设置为display：none;然后改变它们显示其余内容后显示？

多数民众赞成我会怎么做。显示：所有图像均为无，然后：

$(document).ready(function () {
    $("#accordian img").show();
});

在整个文档加载之前，图像不会显示。

Answer 3

如果您想要打开手风琴的窗格，然后显示其中的图像，请查看手风琴的change事件，此事件可能会在窗格打开时发现您。是的，您需要先将图像设置为隐藏。

Answer 4

您可以直接绑定到标签页的“加载”事件...

$("#accordion").tabs(
  "#accordion div.pane",
  {tabs: 'h2', effect: 'slide', initialIndex: null,
    load: function(event, ui){
      $('accordian img').show();
    }
  }
);

现在当标签加载完成（DOM已准备好）时，它将在div中显示图像，并且仅在DOM has been updated to completely reflect the changes to the elements in the tab之后显示。

jQuery Tools：等待手风琴幻灯片完成，然后用手风琴显示图像

4 个答案: