jQuery，幻灯片文本

如何解决jQuery，幻灯片文本

| 我是jQuery新手。如何使一些文字滑入？我试过了，1）它不起作用，2）我可能更喜欢从侧面滑入

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

解决方法

没有更多信息就很难说出问题出在哪里，因为在某些情况下事情可能会出错。这里有一些可能性：如果该元素已经显示，则不会设置动画。如果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>

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

小提琴：http://jsfiddle.net/maniator/6LB8M/ ,签出动画功能，它将为您提供更大的灵活性： http://api.jquery.com/animate/ 您将需要修改边距或x / y位置...类似这样：

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

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

#someId

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

jQuery的

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

在这里查看http://jsfiddle.net/v8XFn/ ,1-也许需要预先隐藏？即：

#someId { display: none }

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

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

http://api.jquery.com/animate/ ,这可以很好地工作。

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

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

可以在这里查看工作：http://jsfiddle.net/R4Xyd/5/ ,您可以设置位置动画。您应该得到这样的内容：的HTML：

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

CSS：

p {
position: abosulte;
left: 0;
}

jQuery的：

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

,获取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，幻灯片文本

如何解决jQuery，幻灯片文本

解决方法

相关推荐