gpt4 book ai didi

jquery - 淡入/淡出(在 Jquery 中)文本更改页面上的位置

转载 作者:行者123 更新时间:2023-11-28 18:08:53 25 4
gpt4 key购买 nike

我在我的网站上做了一个带有引号的淡入淡出的文本,总共有 4 个标签。由于某些奇怪的原因,后面的 2 个标签与前面的 2 个标签不在同一位置。随着标签淡出和出现,我可以看到在从第二个标签到第三个标签的变化中,页面上文本的位置发生了跳跃,它也将页面的整个其余部分向下推(大约10-20 像素移动)。

我尝试过的:

  • 删除整个正文内容,只留下褪色标签。
  • 将标签上的文本更改为数字(0、1、2 和 3)
  • 删除所有其他 CSS 内容,只留下淡入淡出标签类 CSS
  • 删除标签类的所有 CSS(它是 .quotes),除了 display: none;(这是使淡入淡出成为可能的原因)。
  • 删除 display: none; 部分 - 结果是我可以看到所有标签,第二个和第三个标签之间有空格...
  • 将html部分放在DIV中,并赋予height: 100px;宽度:100%;(什么都不做)
  • 添加更多标签 - 前 2 个(索引 0、1)在正确的位置,接下来的 8 个在较低的位置(索引 2-9),然后索引 10 和 11 使页面恢复正常,但不会自行上升,然后数组再次从 0 开始,在索引 0 上,标签再次跳到所需位置。 (也许外星人接管了我的电脑?)

这是 CSS:

        .quotes {
display: none;
text-align: center;
font-family: 'Alef Hebrew', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #999999;
}

这是 JS(jQuery...):

        $(function() {

var quotes = $(".quotes");
var quoteIndex = -1;

function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(800)
.delay(800)
.fadeOut(800, showNextQuote);
}

showNextQuote();
})();

这是 HTML 部分:

    <h1 class="quotes">text1</h1>
<h1 class="quotes">text2</h1>​
<h1 class="quotes">text3</h1>
<h1 class="quotes">text4</h1>

这是页面结构:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=false;">
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,200' rel='stylesheet' type='text/css'>
<title>...</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {

var quotes = $(".quotes");
var quoteIndex = -1;

function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(800)
.delay(800)
.fadeOut(800, showNextQuote);
}

showNextQuote();
})();
</script>
<style>
@import url(http://fonts.googleapis.com/earlyaccess/alefhebrew.css);

.quotes {
display: none;
text-align: center;
font-family: 'Alef Hebrew', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #999999;
}

/*#quotes-block {*/
/*height: 100px;*/
/*width: 100%;*/
/*background-color: #bb5ef2;*/
/*}*/
.
.
.
.
@media (width: 640px), (width:320px) {...}
</style>
</head>
<body>
<header>
<img src="logo.png">
</header>
<!--<div id="quotes-block">-->
<h1 class="quotes">text1</h1>
<h1 class="quotes">text2</h1>​
<h1 class="quotes">text3</h1>
<h1 class="quotes">text4</h1>
<!--</div>-->

<img class ="circle" src="circle.png">
<div id="block">...</div>
<img class ="circle" src="circle.png">
<footer>...</footer>

另外,我使用了答案 here 中的 jQuery 代码

最佳答案

在结束标记 </h1> 之后有一个特殊字符(某种要点)的 text2行。

enter image description here

如果你删除它,它会工作得很好..

参见 http://jsfiddle.net/FbmwD/

关于jquery - 淡入/淡出(在 Jquery 中)文本更改页面上的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19090535/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com