0

我想在这段代码中添加淡入效果......每次我创建新记录时，代码都会向我显示，但我想给它添加淡入效果。谢谢你。这是代码：

<?php
include("includes/db.php");
include("includes/time_stamp.php");
?>

<html>
<head>

<link rel="stylesheet" href="wtfdiary.css">

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" >
$(function() {
$("#tweet_submit").click(function() 
{
var tweet = $("#tweet").val();
var dataString = 'tweet='+ tweet;
if(tweet=='')
{
alert('Please type your tweet');
}
else
{

$.ajax({
type: "POST",
url: "post_tweet.php",
data: dataString,
cache: false,
success: function(html){
$("#tweet").val('');
$("#content").prepend(html);
}
});
}return false;
}); });
</script>

</head>

<body>
<div id="container">

<div id="sidebar">
<div id='logo'><img src='includes/1.png'></div>
<form action="#" method="POST">
<div><textarea id="tweet" name="tweet" placeholder="Compose new Tweet"></textarea></div>
<input type="submit"  value=" Tweet " class="btn" id="tweet_submit"/> 
</form>
<div id="flash_result"></div>
</div>

<div id="main">
<div id='heading'>Tweets</div>
<div id='content'>
<?php


$sql="select * from tweets order by t_id DESC";
$result=mysql_query($sql);
while($row=mysql_fetch_row($result))
{
$time = "$row[2]";
echo "<div class='tweet_box'>";
echo "<div class='tweet_user'><img class='user_img'
     src='http://www.gravatar.com/avatar/a422402df9e5dc54fab6e8131dd19fd0?s=50'></div>";
echo "<div class='tweet_body'>";
?>
<div class='tweet_time'><?php time_stamp($time);?></div>
<?php
echo "<div><b><a href='http://twitter.com/wtfdiary'>Abhishek Ahlawat</a></b> <span
     class='uname'>@wtfdiary</span></div>";
echo "<div class='tweet_text'>$row[1]</div>";
echo "</div></div>";
}

?>
</div>
</div>

</div>

</body>
</html>

我想在出现时添加一些淡入效果

非常感谢你们，你们摇滚！

4

2 回答 2

1

在你的文件“post_tweet.php”中，添加一个style="display:none"你想要淡入的元素。而对于 JS，改变......

$("#content").prepend(html);

...对此：

$(html).prependTo("#content").fadeIn(500);
于 2013-01-03T17:00:49.780 回答
0

这是一个简单的方法。

在另一个页面上进行“查询”，例如：update.php

然后在您要包含此“推文”效果的页面上：

css

#load_tweets
{
background-color:#ffffcc;
height: 360px;
overflow:auto;
overflow-x:hidden;
}

jquery 调用和 jquery 代码（在 head 中）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#load_tweets').fadeOut('slow').load('update.php').fadeIn("slow");
}, 7000);
</script>

然后把它放在你想在页面上显示效果的地方：

<div id="load_tweets"> </div>
于 2013-01-03T16:59:07.923 回答