谁能告诉我这段 jquery 控制动画选项卡有什么问题

Question

我正在尝试创建一个用于动画和移动容器位置的选项卡。代码的第一部分完美地将选项卡移动到 0% 的位置，但是，第二部分没有，我不知道为什么。我不是 jquery 方面的专家，这段代码改编自我在这个网站上找到的代码。来自 jquery 向导的任何帮助都会有所帮助。

谢谢

<script>
        $(document).ready(function(){
            $(".seefullscreentab").click(function(){
                if($(".seefullscreentab a").hasClass('opentab')){
                    $(".scrollpage-container").animate({ 'marginTop': '0%'}, 500);

                    $(".seefullscreentab a").toggle();

                } else {
                    $(".scrollpage-container").animate({ 'marginTop': '-15%'}, 500);
                    $(".seefullscreentab a").addClass('opentab');
                }   
            });
        });
    </script>

违规行似乎是：

$(".scrollpage-container").animate({ 'marginTop': '-15%'}, 500);

如果我去开发者工具并实际输入 marginTop 为'-15%'（它是原始的起始位置），它完美地工作。由于某种原因，jquery 不会把它移到那里。

请帮忙！

Answer 1

你有一个 if/else 条件语句。 JS 的工作方式是您的代码将触发此代码的一个分支，但不会触发另一个分支。这就是为什么一半有效而一半无效的原因。

我可以看到您正在尝试做什么 - 通过条件语句启用切换，但这不是它的工作原理。 jQuery 有几个属性叫做.toggle()、.slideDown() 和.slideToggle()，你应该看看。它们都以类似的方式工作。

我尝试修改您的代码以使用 slideToggle。这可能不是您想要实现的目标，但它会向您展示构建代码的正确方法：

$('.seefullscreentab').click(function() {
  // This would part would toggle the tab closed
  $('.scrollpage-container').slideToggle( 500 , function() {
    // This part would move the container's margin after it's closed
    // Put the original margin in CSS and put override here
    $('.scrollpage-container').css('marginTop': '0%');
  });
});