jQuery, slide-in text
Question
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
$("#someId").html("hello").slideDown('slow');
8 answers
solution1
4 ACCPTED 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. 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?
Here's an example of a use of 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>
solution2
1 2011-05-25 16:16:42
$("#someId").html("hello").show('slide');
solution3
1 2011-05-25 16:16:53
Check out the animate function, it will give you much more flexibility:
http://api.jquery.com/animate/
You'll want to be modifying either the margin or the x / y position...something like this:
$('#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.
solution4
1 2011-05-25 16:17:59
1 - Perhaps it needs to be hidden beforehand? 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).
$('#someId').animate({
width: '250',
}, 5000, function() {
// Animation complete.
});
solution5
1 2011-05-25 16:21:17
CSS:
#someId
{
width:100px;
margin-left:-100px;
}
jQuery
$('div').animate({marginLeft:"0"},1500);
See it here http://jsfiddle.net/v8XFn/
solution6
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/
solution7
0 2011-05-25 16:16:44
You can animate the position. You should get something like this:
html:
<p id="animated_text">text to be animated</p>
css:
p {
position: abosulte;
left: 0;
}
jquery:
$("#animated_text").animate({'left': '+=200'}, 1000);
solution8
0 2011-05-25 16:23:54
Get the jQuery-easing plugin and add it to your file
<script src="script/jquery.easing.1.3.js" type="text/javascript"></script>
--and do this--
$('#yourDiv').delay(3000).effect('slide', { direction: "right" });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.