个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
为什么所有内容在淡入以下内容之前都会向下猛拉，我该如何修复它？
使用 FireFox 3.6.3，提前致谢。
<html>
<head>
<script type="text/javascript" language="javascript" src="http://localhost/javascript/jquery-1.4.2.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#button").click(function(){
$("*").fadeTo("slow",0.0);
});
});
</script>
</head>
<body>
<p>Just a normal paragraph doing my job!</p>
<p>Me too!</p>
<input type="button" id="button">
</body>
</html>
最佳答案
这与尝试淡出所有元素有关，包括 <body> 之外的元素。 。尝试:
$("body > *").fadeTo(..)
但是当您可以简单地对主体本身进行淡入淡出时，为什么要淡出每个元素。
$("body").fadeTo(..)
编辑:更多研究表明，当尝试淡入 <style> 时和<head>元素(不按特定顺序排列)会导致所有内容向下移动。还不知道为什么，但你可以在这里看到一个例子 - http://jsfiddle.net/UKn8r/2/
编辑2:好的，我想我可能有一个理由。 <head>及其子元素，例如 <style> , <script>等默认设置为 display: none在用户代理的样式表中。当淡出它们时，jQuery 最终将它们的显示属性设置为 display: block 。现在这些子元素的内容并不意味着要显示在屏幕上，而是通过将它们设置为 display: block ，它显示为一个大约 20px 高的水平 block ，没有任何内容，这会将其他所有内容向下移动。请注意，如果您要清空 <script>元素并制作 onclick内联，那么您就不会在 Firefox 上看到跳转，因为该元素将为空，并且即使显示为 block 也不会占用屏幕上的任何空间。因此将其更改为:
<html>
<head>
<script src="http://localhost/javascript/jquery-1.4.2.js"></script>
</head>
<body>
<p>Just a normal paragraph doing my job!</p>
<p>Me too!</p>
<input type="button" id="button" onclick='$("*").fadeTo("slow",0.0);'>
</body>
</html>
不会引起任何跳跃。
此外，您的原始代码将在 Webkit 浏览器(Chrome、Safari)上正常工作，如 display <script> 的样式属性元素不会被覆盖为 block 。但是，对于这些浏览器，如果您有 style元素内有 some 内容，那么您会看到与 <style> 相同的行为将有一个内联样式属性 display: block 。现在，拥有类似 <style style="display: block; opacity: 0">..</style> 之类的东西似乎完全没用。 ，但这只是对为什么您会看到您所看到的行为的解释。因此，要在这些浏览器上重现相同的问题，请尝试以下代码:
<html>
<head>
<script src="http://localhost/javascript/jquery-1.4.2.js"></script>
<style>p {}</style>
</head>
<body>
<p>Just a normal paragraph doing my job!</p>
<p>Me too!</p>
<input type="button" id="button" onclick='$("*").fadeTo("slow",0.0);'>
</body>
</html>
<style>属性必须有一些内容，而不是纯空白，所以我把垃圾 p {}那里。
这结束了我对一开始不应该做的事情的浪费性搜索:)
关于javascript - jQuery $ ("*").fadeTo() 在淡入淡出之前移动内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3078251/
24
4
0
我在 jQuery 中使用 fadeTo() 函数时遇到问题。一开始这一切都对我有用，但现在由于某些未知的原因停止了工作。在这里我向您展示网页代码。如果您能帮助我，我将不胜感激。 $(d
我有一个 div，我用两个 div(分别命名为打开和关闭)为它的位置设置动画。 我希望“打开”div 在打开动画完成时淡出并且不可见。并在关闭动画完成时淡入可见。 但是淡入有问题。时间参数被忽略，它出
我正在 WordPress 上的特色图像上使用 .fadeTo() jQuery 效果。我如何设置代码是，如果鼠标悬停在图像上，它会淡出到 0.7，当鼠标离开时，它会淡出回 1: jQuery(fun
我创建了 3 个链接，当它们悬停在淡入淡出上时，我还添加了一个单击事件，单击该事件时会添加“事件”类，然后我想在再次单击时删除该类。我读过一些帖子，似乎建议将removeClass放在addClass
我使用下面的 javascript 递归地重新加载一个目标 DIV，其 id="outPut"，将参数传递给 getData.php 时执行数据查询的结果>。问题是 fadeTo 会淡化每次迭代调用返
我正在慢慢学习如何从头开始修改和编写 jQuery，并一直在尝试修改一些预先编写的代码，这只是简单地使图像不透明度:1 和同一 HTML 元素中的所有其他图像不透明度:0.2。 当我使用 fadeTo
我试图在我的工作中对一个小的 div 对象添加一个小的 .fadeTo 效果，但不确定我是否可以以及在哪里添加它。我想将此效果添加到所有的 div。我希望它 .fadeTo (500) 这是我的 js
我正在从事一个名为 BitDay 的开源元素，该元素是我不久前在 Reddit 上启动的。 我有 12 个元素作为 CSS 类，每个元素都有自己的背景图片。 现在，我使用的 jQuery 获取时间，并
我创建了一个显示图片的网站。当您将鼠标悬停在其中一张图片上时，我希望它 fadeTo 0.5 不透明度并且我希望出现文本。例如 悬停前的图片: http://i.imgur.com/2O5BQKB.p
我一直在尝试在 div 上添加一个 .fadeTo 并最终让它工作 我有这个: BRILLIANT-HUED $(window).scroll(function (
为什么所有内容在淡入以下内容之前都会向下猛拉，我该如何修复它？ 使用 FireFox 3.6.3，提前致谢。 $(documen
当您将鼠标悬停在 div 上或向下时，我想要的是一种鼠标轨迹效果。但是，如果您将鼠标悬停过快几次然后停止，效果会自行重复。 我该如何解决这个问题？我想我需要某种出队的东西，比如动画选项，但对于 fad
我让这张图片在点击按钮后淡出。如何使图像恢复到原始状态？ const playGame = () => { init(); // logic removed for brevity $('
我想将 fadeTo 添加到此代码段。当 this 添加类 current 时，我希望它淡入。但我不知道如何解决，也不知道我必须在哪里放置 fadeTo (); 参数。 $(this).bind("c
有没有办法在鼠标悬停时中断 fadeTo 动画？例如:在下面的代码中，当有人悬停“slider$controls”时，它们会在 1750 毫秒时逐渐变为 0.1 不透明度，但是当您将鼠标悬停在它们上方
我有这个使用 jquery 的脚本: $(document).ready(function() { $('.fotky,.video,.diskusia,.onas,.zbrane,.akci
我正在尝试停止 fadeTo() 动画。我有一 block 4 张图片，其中 3 张(未悬停的)应变暗，而悬停的图片保持不透明度 1。不幸的是，到目前为止，我的代码使每张图片(包括悬停的图片)在这张“
我不明白为什么 .quote-container 不透明度高于 #new-quote 如果它们在相同的 fadeTo() 函数括号和持续时间是相同的。 我的意思是，在 fadeTo() 动画期间，.q
我正在尝试编写一个脚本，首先将图片淡化到 80%，然后 60%，等等。一直到 1%，但是当我调用事件 (.click) 时，我得到的只是一次交易，它会达到我设定的不透明度。我怎样才能让它继续下去？提前
我想要一个等效于 fadeTo() 的颜色，而不是不透明度。 例如，从 backgroundColor = "red" 开始，如何使用 jQuery 逐渐过渡到 backgroundColor = "
我是一名优秀的程序员,十分优秀！