jQuery，滑入式文本
[英]jQuery, slide-in text
问题描述
I am new to jQuery.
我是 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我试过了，1）它不起作用，2）我可能更喜欢让它从侧面滑入
$("#someId").html("hello").slideDown('slow');
8 个解决方案
解决方案1
4 已采纳 2011-05-25 16:19:09
It's hard to tell what's wrong without more information, since there are several possible points where things can go wrong.如果没有更多信息，很难判断出了什么问题，因为有几个可能的点 go 会出错。 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.如果 jquery 选择最终没有拾取任何元素，您也不会看到任何内容。 Is there an element with the id 'someId' in your DOM tree?在您的 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>
解决方案2
1 2011-05-25 16:16:42
$("#someId").html("hello").show('slide');
Fiddle: http://jsfiddle.net/maniator/6LB8M/小提琴： http://jsfiddle.net/maniator/6LB8M/
解决方案3
1 2011-05-25 16:16:53
Check out the animate function, it will give you much more flexibility:查看动画 function，它将为您提供更多灵活性：
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 position ......像这样：
$('#someID').html("hello").animate({
left: '+=50',
}, 1000, function() {
// Animation complete.
});
This means that #someID will 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将应用 animation 元素，其中 x 轴上的元素 position 将增加 50 像素，并且将在 1 秒内发生。
解决方案4
1 2011-05-25 16:17:59
1 - Perhaps it needs to be hidden beforehand? 1 - 也许它需要事先隐藏？ ie: IE：
#someId { display: none }
2 - You can animate the width of the container. 2 - 您可以为容器的宽度设置动画。 So if your container has zero width, animate it to 250 pixels in width (or whatever).因此，如果您的容器宽度为零，请将其设置为宽度为 250 像素（或其他任何值）。
$('#someId').animate({
width: '250',
}, 5000, function() {
// Animation complete.
});
http://api.jquery.com/animate/ http://api.jquery.com/animate/
解决方案5
1 2011-05-25 16:21:17
CSS: CSS：
#someId
{
width:100px;
margin-left:-100px;
}
jQuery jQuery
$('div').animate({marginLeft:"0"},1500);
See it here http://jsfiddle.net/v8XFn/在这里看到它http://jsfiddle.net/v8XFn/
解决方案6
1 2011-08-29 21:53:29
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/
解决方案7
0 2011-05-25 16:16:44
You can animate the position.您可以为 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: jquery：
$("#animated_text").animate({'left': '+=200'}, 1000);
解决方案8
0 2011-05-25 16:23:54
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" });
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.