jQuery FadeIn 从左到右
Posted
技术标签:
【中文标题】jQuery FadeIn 从左到右【英文标题】：jQuery FadeIn from left to right 【发布时间】：2013-08-25 03:45:47 【问题描述】：在我的 jQuery 中，我使用 ID 淡入一个 div。我希望淡入淡出从左到右“移动”。
到目前为止我的 sn-p：
$('#content').hide().fadeIn(1500);
谁能帮帮我？
谢谢！
【问题讨论】：
检查这个***.com/a/625192/1961192 【参考方案1】： $("#content").hide().show("slide", direction: "left" , 1500);
【讨论】：
这似乎不起作用。未捕获的类型错误：k.easing[this.easing] 不是 init.run (jquery-3.4.1.min.js:2) 中的函数【参考方案2】：$('#content').hide().fadeIn(function()
$('#content').animate(
left: "80px"
, 500);
,1500).css('left' ,'0');
【讨论】：
【参考方案3】：这将比听起来更难实现。如果您需要支持 IE8 等旧版浏览器，那就更难了。
我能想到的最实用的解决方案是使用与背景颜色相同的叠加元素，但使用渐变而不是纯色背景。
渐变将具有至少与被隐藏元素的大小相同的纯色，以便它看起来只是显示背景色，但会有一个隐藏部分超出元素的边界，并淡出在那个隐藏的部分透明。
然后是一个简单的例子，对叠加层进行动画处理，使渐变逐渐暴露出来，露出它背后的内容。
您根本不会使用普通的fadeIn() 函数。尽管它看起来像是横向淡入，但从技术角度来看，它就像将卡片从元素顶部滑下以显示它的效果。
在旧版本的 IE 中正确使用可能会很棘手，因为它使用专有的渐变功能。这在理论上应该是可能的，但是 IE8 的 filter 渐变有很多怪癖，如果你想像这样用它们做“聪明”的事情，你可能会发现它们。
我没有时间为你编写一个工作原型，但希望这能让你有足够的入门知识开始编写它。
【讨论】：
【参考方案4】：这是一种快速简单的方式：
$("#ID").css("position":"relative","opacity": 0, "left":"+=100");
$("#ID").animate(left:0, opacity:1,2000);
您需要在 CSS 中指定 "opacity" :0, "position": "relative"(or Absolute) 或使用 JQuery 对其进行调整。就像我做过的那样。
这段代码移动对象 100px 从它的原始位置。然后在淡入时再次返回。
祝你好运！
【讨论】：
【参考方案5】：//这就是你想要的
var $marginLefty = $("#content"); // your selector here
$marginLefty.animate(
height:'toggle',width:'toggle',
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() :
0
);
下面编辑的示例示例
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
$("button").click(function()
var $marginLefty = $("#content"); // your selector here
$marginLefty.animate(
height:'toggle',width:'toggle',
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() :
0
);
);
);
</script>
</head>
<body>
<button>Start Animation</button>
<div id="content" style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
【讨论】：
谢谢。一个问题：现在元素消失了。如何将元素来自“外部”的“动画”反转为内容？ 简单。再次调用相同的函数。【参考方案6】：您可以使用 CSS 过渡，结合其中的两个，宽度和不透明度。
-webkit-transition: width 500ms ease-in, opacity 1.5s ease-out;
-moz-transition: width 500ms ease-in, opacity 1.5s ease-out;
-o-transition: width 500ms ease-in, opacity 1.5s ease-out;
transition: width 500ms ease-in, opacity 1.5s ease-out;
要让内容保持在同一个地方，请看这个小提琴：http://jsfiddle.net/LLn311un/1/
【讨论】：
【参考方案7】：我个人使用 animate.css 库
只需将 css 文件链接到您的页面：
<link href= "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
您也可以下载文件并在本地提供。
然后只需将类“动画 slideInLeft”添加到您的元素。
$('#content').show().addClass('animated slideInLeft');
您可以在此处查看文档：https://animate.style/
【讨论】：
以上是关于jQuery FadeIn 从左到右的主要内容，如果未能解决你的问题，请参考以下文章