jQuery，滑入式文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6127514/
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, slide-in text
提问by Roger
I am new to jQuery. How can I make some text slide in? I tried this and 1) it does not work, and 2) I might prefer to have it slide in from the side
我是 jQuery 的新手。我怎样才能让一些文字滑入？我试过了，1）它不起作用，2）我可能更喜欢让它从侧面滑入
$("#someId").html("hello").slideDown('slow');
回答by dyoo
It's hard to tell what's wrong without more information, since there are several possible points where things can go wrong. Here are some possibilities:
如果没有更多信息，很难判断哪里出了问题，因为有几个可能的地方可能会出错。这里有一些可能性：
- If the element is already showing, it won't animate.
- If the jquery selection ends up not picking up any elements, you won't see anything either. Is there an element with the id 'someId' in your DOM tree?
- 如果元素已经显示，它不会动画。
- 如果 jquery 选择最终没有选择任何元素，您也将看不到任何内容。您的 DOM 树中是否有 ID 为“someId”的元素？
Here's an example of a use of slideDown:
下面是一个使用 slideDown 的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function() {
$("#someId").hide();
$("#someId").html("hello").slideDown('slow');
});
</script>
</head>
<body>
<div id="someId"></div>
</body>
</html>
回答by Naftali aka Neal
$("#someId").html("hello").show('slide');
回答by Calvin Froedge
Check out the animate function, it will give you much more flexibility:
看看 animate 函数，它会给你更多的灵活性：
http://api.jquery.com/animate/
http://api.jquery.com/animate/
You'll want to be modifying either the margin or the x / y position...something like this:
你会想要修改边距或 x / y 位置......像这样：
$('#someID').html("hello").animate({
left: '+=50',
}, 1000, function() {
// Animation complete.
});
This means that #someIDwill have an animation applied in which the elements position on the x axis will be increased by 50 pixels, and it will happen over 1 second.
这意味着#someID将应用一个动画，其中 x 轴上的元素位置将增加 50 像素，并且将发生超过 1 秒。
回答by karim79
1 - Perhaps it needs to be hidden beforehand? i.e.:
1 - 也许它需要事先隐藏？IE：
#someId { display: none }
2 - You can animate the width of the container. So if your container has zero width, animate it to 250 pixels in width (or whatever).
2 - 您可以为容器的宽度设置动画。因此，如果您的容器的宽度为零，请将其动画设置为 250 像素的宽度（或其他）。
$('#someId').animate({
width: '250',
}, 5000, function() {
// Animation complete.
});
回答by Jishnu A P
CSS:
CSS：
#someId
{
width:100px;
margin-left:-100px;
}
jQuery
jQuery
$('div').animate({marginLeft:"0"},1500);
See it here http://jsfiddle.net/v8XFn/
回答by user624385
This can work nicely.
这可以很好地工作。
$(".inner").mouseover(function(){
$(".inner").animate({"marginLeft": "-=100px"}, "slow");
});
$(".inner").mouseout(function(){
$(".inner").animate({"marginLeft": "+=100px"}, "slow");
});
See it at work here: http://jsfiddle.net/R4Xyd/5/
在这里查看它的工作：http: //jsfiddle.net/R4Xyd/5/
回答by pai.not.pi
Get the jQuery-easing plugin and add it to your file
获取 jQuery-easing 插件并将其添加到您的文件中
<script src="script/jquery.easing.1.3.js" type="text/javascript"></script>
--and do this--
$('#yourDiv').delay(3000).effect('slide', { direction: "right" });
回答by Máthé Endre-Botond
You can animate the position. You should get something like this:
您可以为该位置设置动画。你应该得到这样的东西：
html:
html：
<p id="animated_text">text to be animated</p>
css:
css：
p {
position: abosulte;
left: 0;
}
jquery:
查询：
$("#animated_text").animate({'left': '+=200'}, 1000);
