Question

我使用jquery打开/关闭标签时遇到麻烦。目的是单击选项卡以显示位于下方的滑块的全屏图像。从技术上讲，滑块本身不会改变，它只是简单地改变位于其下方的面板的marginTop，以显示滑块的全屏图像。在http://www.the3rdobject.com/test-site/index.html处有一个测试链接 - 顶部选项卡虽然执行类似的功能但仍能正常工作，但无法让下方标签返回到原始位置。任何帮助将不胜感激。

首先，只需点击下方标签“显示全屏图片” - 这会打开以显示下方的滑块。只需要让它关闭。

任何jquery专家，请帮忙！我是一个jquery newb并且出去了我的想法！

Answer 1

以下代码应该有效：

// gets all the anchor elements inside the elements with a css class 'seefullscreentab'
$(".seefullscreentab a").click(function() {
  // the margin to animate will be 0% if the anchor css class is 'opentab' and -15% if not
  var margin = $(this).hasClass('opentab') ? '0%' : '-15%';
  // animates the element with the css class 'scrollpage-container' to the margin above
  $(".scrollpage-container").animate({ marginTop: margin }, 500);
  // toggle the visibility of the anchors
  // (the current visible anchor turns to hidden, and the hidden one turns to visible)
  $(".seefullscreentab a").toggle();
});

Jquery动画切换以移动marginTop - 演示附加

1 个答案: