jQuery，滑入式文本
[英]jQuery, slide-in text
問題描述
我是 jQuery 的新手。 我怎樣才能讓一些文字滑入？ 我試過了，1）它不起作用，2）我可能更喜歡讓它從側面滑入
$("#someId").html("hello").slideDown('slow');
8 個解決方案
解決方案1
4 已采納 2011-05-25 16:19:09
如果沒有更多信息，很難判斷出了什么問題，因為有幾個可能的點 go 會出錯。 以下是一些可能性：
- 如果元素已經顯示，它不會動畫。
- 如果 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>
解決方案2
1 2011-05-25 16:16:42
$("#someId").html("hello").show('slide');
解決方案3
1 2011-05-25 16:16:53
查看動畫 function，它將為您提供更多靈活性：
http://api.jquery.com/animate/
您需要修改邊距或 x / y position ......像這樣：
$('#someID').html("hello").animate({
left: '+=50',
}, 1000, function() {
// Animation complete.
});
這意味着#someID將應用 animation 元素，其中 x 軸上的元素 position 將增加 50 像素，並且將在 1 秒內發生。
解決方案4
1 2011-05-25 16:17:59
1 - 也許它需要事先隱藏？ IE：
#someId { display: none }
2 - 您可以為容器的寬度設置動畫。 因此，如果您的容器寬度為零，請將其設置為寬度為 250 像素（或其他任何值）。
$('#someId').animate({
width: '250',
}, 5000, function() {
// Animation complete.
});
解決方案5
1 2011-05-25 16:21:17
CSS：
#someId
{
width:100px;
margin-left:-100px;
}
jQuery
$('div').animate({marginLeft:"0"},1500);
解決方案6
1 2011-08-29 21:53:29
這可以很好地工作。
$(".inner").mouseover(function(){
$(".inner").animate({"marginLeft": "-=100px"}, "slow");
});
$(".inner").mouseout(function(){
$(".inner").animate({"marginLeft": "+=100px"}, "slow");
});
在這里查看它： http://jsfiddle.net/R4Xyd/5/
解決方案7
0 2011-05-25 16:16:44
您可以為 position 設置動畫。 你應該得到這樣的東西：
html：
<p id="animated_text">text to be animated</p>
css：
p {
position: abosulte;
left: 0;
}
jquery：
$("#animated_text").animate({'left': '+=200'}, 1000);
解決方案8
0 2011-05-25 16:23:54
獲取 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文本動畫幻燈片
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.