jQuery, slide-in text_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-08 03:44 出处：网络

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

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开发者_StackOverflow中文版("hello").slideDown('slow');

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>

$("#someId").html("hello").show('slide');

Fiddle: http://jsfiddle.net/maniator/6LB8M/

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.

CSS:

#someId

{
    width:100px;
    margin-left:-100px;
}

jQuery

$('div').animate({marginLeft:"0"},1500);

See it here http://jsfiddle.net/v8XFn/

1 - Perhaps it needs to be hidden beforehand? i.e.:

#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.
});

http://api.jquery.com/animate/

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/

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);

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" });