Question

我是jQuery的新手。如何制作一些文字幻灯片？我试过这个，1）它不起作用，2）我可能更喜欢从侧面滑入

$("#someId").html("hello").slideDown('slow');

Answer 1

如果没有更多信息，很难说出错了，因为有几点可能会出问题。以下是一些可能性：

如果元素已经显示，则不会设置动画。
如果jquery选择最终没有拾取任何元素，您也不会看到任何内容。在DOM树中是否有一个id为'someId'的元素？

以下是使用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>

Answer 2

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

小提琴：http://jsfiddle.net/maniator/6LB8M/

Answer 3

查看动画功能，它将为您提供更多灵活性：

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

你想要修改边距或x / y位置......就像这样：

$('#someID').html("hello").animate({
  left: '+=50',
}, 1000, function() {
  // Animation complete.
});

这意味着#someID将应用动画，其中x轴上的元素位置将增加50像素，并且将在1秒内发生。

Answer 4

1 - 也许它需要预先隐藏？即：

#someId { display: none }

2 - 您可以设置容器宽度的动画。因此，如果容器的宽度为零，则将其设置为250像素宽（或其他）。

$('#someId').animate({
    width: '250',
}, 5000, function() {
    // Animation complete.
});

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

Answer 5

CSS：

#someId

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

的jQuery

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

在此处查看http://jsfiddle.net/v8XFn/

Answer 6

这可以很好地工作。

$(".inner").mouseover(function(){
  $(".inner").animate({"marginLeft": "-=100px"}, "slow");
});

$(".inner").mouseout(function(){
  $(".inner").animate({"marginLeft": "+=100px"}, "slow");
});

在此处查看： http://jsfiddle.net/R4Xyd/5/

Answer 7

您可以为该位置设置动画。你应该得到这样的东西：

HTML：

<p id="animated_text">text to be animated</p>

的CSS：

p {
position: abosulte;
left: 0;
}

jquery的：

$("#animated_text").animate({'left': '+=200'}, 1000);

Answer 8

获取jQuery-easing插件并将其添加到您的文件

<script src="script/jquery.easing.1.3.js" type="text/javascript"></script>
--and do this--
$('#yourDiv').delay(3000).effect('slide', { direction: "right" });

jQuery，滑入式文本

8 个答案: