jQuery，滑入文本

我是jQuery的新手。我如何使一些文字幻灯片？我尝试这样做，1）它不工作，和2）我可能更喜欢把它从侧面滑动jQuery，滑入文本

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

来源

2011-05-25 Roger

这很难说什么是错的没有更多的信息，因为有几个可能的点在那里事情都可能出错。这里有一些可能性：

如果元素已经显示，它不会动画。
如果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>

来源

2011-05-25 16:19:09 dyoo

dyoo，感谢这个例子;我可以看到它的工作原理，更具体地说，我发现html ... slidedown语法也适用。我认为我的错误并不是将代码行放在文档中...... ready ...函数。但好奇的是，单词“hello”被注入到html中，但滑动函数不起作用。其实我重做了一个我用JavaScript写的旧脚本，其中这个语句在if/else中。我想我必须移动整个if/else，也许整个脚本在document ... ready ...函数中。 – Roger 2011-05-25 18:58:09

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

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

来源

2011-05-25 16:16:42 Neal

您可以动画的位置。你应该得到这样的事情：

HTML：

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

CSS：

p { 
position: abosulte; 
left: 0; 
}

的jQuery：

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

来源

2011-05-25 16:16:44 SinistraD

退房的动画功能，它会给你更多灵活性：

你要被修改或者保证金或X/Y位置......是这样的：

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

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

来源

2011-05-25 16:16:53

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

#someId { display: none }

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

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

来源

2011-05-25 16:17:59 karim79

是 - 如果你把一个隐藏（）你了slideDown之前，它会工作 – 2011-05-25 16:20:20

CSS：

#someId 

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

jQuery的

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

见这里http://jsfiddle.net/v8XFn/

来源

2011-05-25 16:21:17

获取jQuery的宽松插件并将其添加到您的文件

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

来源

2011-05-25 16:23:54

这可以很好地工作。

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

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

看到工作在这里：http://jsfiddle.net/R4Xyd/5/

来源

2011-08-29 21:53:29 user624385

jQuery，滑入文本

回答

相关问题