Question

每当我使用jQuery淡化我们的元素时，其他元素，垂直居中，有点跳跃。

以下是我的意思：

$("#one").click(function(){
  $("#two").fadeToggle();
});

body {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="one">Paragraph 1</p>
<p id="two">Paragraph 2</p>

点击第一段时，第二段淡出/。

我想要实现的是，不是好，跳转，我希望它在这两个位置之间进行动画（滑动/滚动）。我怎么能这样做？

Answer 1

为避免跳跃，您可以使用slideToggle()：

＆＃13;

$("#one").click(function() {
  $("#two").slideToggle();
});

＆＃13;

body {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="one">Paragraph 1</p>
<p id="two">Paragraph 2</p>

＆＃13;

Answer 2

如果可以，请将第一段的位置设置为相对：

#one {
   position: relative;
}

然后添加第一段的动画：

$('#one').animate({top: animationType + topPos + 'px'});

摘录：

$("#one").on('click', function() {
    var topPos = Math.ceil($('#one').height());
    var animationType = '+=';
    if ($('#two').is(':not(:visible)')) {
      animationType = '-=';
      topPos = topPos;
    }

    $("#two").fadeToggle();
    $('#one').animate({top: animationType + topPos + 'px'}, 800);
});

body {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
#one {
    position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<p id="one">Paragraph 1</p>
<p id="two">Paragraph 2</p>

使用jQuery淡化时修复元素跳转

2 个答案: