Question

所以我在这里吃点腌菜。我尝试使用带有JQuery的回调 fadein 函数创建一个居中的内联文本，其中两个不同的句子以不同的速度淡入。问题是动画不是我想要的：第一个单词首先出现在中心，然后当第二个单词出现时，它将第一个单词推向左边。

有没有办法让这些文本处于固定的中心位置？我尝试将 relative ，绝对应用于每个单独的文本，并使用css将位置向左移动，但它会影响设计的响应性。

以下是代码：

$(document).ready(function() {
  $("#1").fadeIn(1000, function() {
    $("#2").fadeIn(2000);
  });
});

#main {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

p {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <p id="1" style="display:none;">Hello.</p>
  <p id="2" style="display:none;">World.</p>
</div>

JSFiddle

感谢您的帮助！

Answer 1

您可以使用opacity或visibility，因为这些会保留元素＆＃39;页面上的布局，只是在视觉上隐藏/显示它们。如果您要淡出opacity，请使用$.fadeTo()代替$.fadeIn() - https://api.jquery.com/fadeTo/

＆＃13;

$(document).ready(function() {
   $("#1").fadeTo('fast',1,function() {
     $("#2").fadeTo('slow',1);
   });
 });

＆＃13;

#main {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

p {
  display: inline;
  opacity: 0;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="main">
  <p id="1">Hello.</p>
  <p id="2">World.</p>
</div>

＆＃13;

您也可以使用CSS执行此操作。在这里，我添加了一个启用opacity: 1的类，您可以控制CSS转换中的时间。

＆＃13;

$(document).ready(function() {
   $("#1").on('transitionend',function() {
     $("#2").addClass('ready');
   }).addClass('ready');
});

＆＃13;

#main {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

p {
  display: inline;
  opacity: 0;
  transition: opacity 1s;
}

.ready {
  opacity: 1;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="main">
  <p id="1">Hello.</p>
  <p id="2">World.</p>
</div>

＆＃13;

以居中为中心的内联文本重新定位于fadein

1 个答案: