jQuery FadeIn 从左到右
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18379988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery FadeIn from left to right
提问by Raffinatore
In my jQuery I fadein a div with an ID. I want that the fadein "moves" from the left to the right.
在我的 jQuery 中，我淡入了一个带有 ID 的 div。我希望淡入淡出从左到右“移动”。
My snippet so far:
到目前为止我的片段：
$('#content').hide().fadeIn(1500);
Who can help me?
谁能帮我？
Thank you!
谢谢！
回答by Sebastian Rush
$("#content").hide().show("slide", { direction: "left" }, 1500);
回答by Spudley
This will be harder to achieve than it sounds. And even harder if you need to support older browsers like IE8.
这将比听起来更难实现。如果您需要支持像 IE8 这样的旧浏览器，那就更难了。
The most practical solution I can think of is to use an overlay element that is the same colour as the background, but with a gradient rather than a solid background colour.
我能想到的最实用的解决方案是使用与背景颜色相同的叠加元素，但使用渐变而不是纯背景色。
The gradient would have the solid colour for at least the size of the element being hidden so that it appears to be just showing the background colour, but would have a hidden portion that extends beyond the borders of the element, and fade out to transparent in that hidden portion.
渐变将至少具有隐藏元素大小的纯色，以便它看起来只是显示背景颜色，但会有一个隐藏部分延伸到元素的边界之外，并淡出到透明那个隐藏的部分。
Then it's a simple case of animating the overlay so that the gradient is gradually exposed, revealing the content behind it.
然后是一个简单的例子，动画叠加层，使渐变逐渐暴露，揭示其背后的内容。
You wouldn't use the normal fadeIn()function at all. Even though it would look like a sideways fade-in, from a technical perspective it would be like an effect to slide a card off the top of an element to reveal it.
您根本不会使用正常fadeIn()功能。尽管它看起来像是横向淡入，但从技术角度来看，这就像将卡片从元素顶部滑下以显示它的效果。
It may be tricky to get right in old versions of IE, which use a proprietary feature for gradients. It ought to be possible in theory, but IE8's filtergradients have quite a few quirks that might catch you out if you're trying to do 'clever' stuff with them like this.
在旧版本的 IE 中正确使用可能会很棘手，它使用渐变的专有功能。这在理论上应该是可能的，但是 IE8 的filter渐变有很多怪癖，如果您试图像这样用它们做“聪明”的事情，可能会引起您的注意。
I don't have time to write a working prototype for you, but hopefully that gives you enough of a starter to get going with writing it.
我没有时间为您编写工作原型，但希望这能让您有足够的时间开始编写它。
回答by Suryaprakash Pisay
//This is what you want
//这就是你想要的
var $marginLefty = $("#content"); // your selector here
$marginLefty.animate({
height:'toggle',width:'toggle',
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() :
0
});
Sample Example edited below
下面编辑的示例示例
<!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>
回答by Haroun Hajem
This is a fastan easyway:
这是一个快一个简单的方法：
$("#ID").css({"position":"relative","opacity": 0, "left":"+=100"});
$("#ID").animate({left:0, opacity:1},2000);
$("#ID").css({"position":"relative","opacity": 0, "left":"+=100"});
$("#ID").animate({left:0, opacity:1},2000);
You need to specify "opacity" :0, "position": "relative"(or Absolute)in the CSS or by tweaking it with JQuery. Like I've done.
您需要"opacity" :0, "position": "relative"(or Absolute)在 CSS 中指定或使用 JQuery 对其进行调整。就像我做的那样。
This code movesthe object 100pxfrom it's original position. And then back again while fading in.
此代码将对象从其原始位置移动 100像素。然后在淡入时再次返回。
Good Luck!
祝你好运！
回答by Fanky
You can use CSS transitions, combining two of them, width and opacity.
您可以使用 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;
To let the content stay at the same place see this fiddle: http://jsfiddle.net/LLn311un/1/
为了让内容停留在同一个地方，请看这个小提琴：http: //jsfiddle.net/LLn311un/1/
回答by Rajiv007
$('#content').hide().fadeIn(function(){
$('#content').animate({
left: "80px"
}, 500);
},1500).css('left' ,'0');
