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

Question

我在使用 jquery 时遇到 open/close 选项卡的问题。目的是单击选项卡以显示位于下方的滑块的全屏图像。从技术上讲，滑块本身并没有改变，它只是简单地改变位于其下方的面板的 marginTop 以显示滑块的全屏图像。 link 上有一个测试：http://www.the3rdobject.com/test-site/index.html - 顶部选项卡虽然执行类似的功能但工作完美，但无法将下方选项卡 return 恢复到其原始位置。任何帮助将不胜感激。

首先，只需单击下方的选项卡 'Show fullscreen image' - 这将打开并显示下方的滑块。只需要让它关闭。

请jquery高手帮忙！我是一个 jquery 新手，而且我很想出去！

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 的动画切换 - 附加演示

Jquery animate toggle to shift marginTop - demo attached

javascript

jquery

toggle

jquery-animate