jQuery FadeIn 从左到右答案

【问题标题】：jQuery FadeIn from left to rightjQuery FadeIn 从左到右
【发布时间】：2013-08-25 03:45:47
【问题描述】：

在我的 jQuery 中，我使用 ID 淡入一个 div。我希望淡入淡出从左到右“移动”。

到目前为止我的 sn-p：

$('#content').hide().fadeIn(1500);

谁能帮帮我？

谢谢！

【问题讨论】：

检查这个stackoverflow.com/a/625192/1961192

标签： jquery fadein

【解决方案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/

【讨论】：