1

我不知道为什么，但其中一个 div，.load_post，但 .blog_posts 没有动画。我不知道为什么。这是我的代码：

page1.php（主页面）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<?php
include 'body/head.php';
?>

<body>
<?php
    include 'body/nav.php';
?>

<script>
    $(document).ready(function() {
        $('.blog_posts').load('blog_feed.php');
    });
</script>

<div style="position:absolute; top:90px; left:1px; width:550px; background-color:lightblue;">

    <h1>Blog Posts</h1>

    <div class="blog_posts">

    </div>

    <div class="load_post" style="position:absolute; top:250px; left:1500px; width:550px; background-color:lightblue;">

    </div>
</div>
</body>
</html>

page2.php（加载和动画 div）

<?php

mysql_connect('127.0.0.1', 'root', '');
mysql_select_db('awsomechat');

$query = mysql_query("SELECT * FROM `blog`");

?>

<?php
while ($rows = mysql_fetch_array($query)){

$id = $rows['id'];
$date = str_replace("-", "/", $rows['date']);
$title = stripslashes($rows['title']);

?>
<a href="#" class="post" rel="<?php echo $id; ?>"> <h2 style="padding:0px; margin:0px;"><?php echo $title; ?></h2></a>
<h6 style="padding:0px; margin:0px;"><?php echo $date; ?></h6>
<?php
}
?>

<script>
$('.post').click(function() {       
var value = $(this).attr('rel');

$('.load_post').html('Loading...').load('load_post.php?value='+value);
$('load_post').animate({"left": "-=1500px"}, "slow");
$('.blog_posts').animate({"left": "-=1500px"}, "slow");

});
</script>

page3.php（加载选定的帖子）

<?php

mysql_connect('127.0.0.1', 'root', '');
mysql_select_db('awsomechat');

$post = mysql_real_escape_string(htmlentities($_GET['value']));

$query = mysql_query("SELECT * FROM `blog` WHERE `id` = $post");

$rows = mysql_fetch_array($query);

?>
<div class="loaded_post">

<h2 style="padding:0px; margin:0px;"><?php echo stripslashes($rows['title']); ?></h2>
<h6 style="padding:0px; margin:0px;"><?php echo str_replace("-", "/", $rows['date']); ?></h6>
<p><?php echo stripslashes($rows['text']); ?></p>

</div>

谁能看到为什么 .blog_posts 没有动画的问题？我无法弄清楚为什么它没有向左移动。

4

4 回答 4

1

将此添加到page1.php而不是page2.php使您的 JS 看起来像：

<script>
$(document).ready(function() {
    $('.blog_posts').load('blog_feed.php');
    $(document).on('click', '.post', function() {       
        var value = $(this).attr('rel');
        $('.load_post').html('Loading...')
                       .load('load_post.php?value='+value, function(){
                            $(this).animate({"left": "-=1500px"}, "slow");
                            $('.blog_posts').animate({"left": "-=1500px"}, "slow");
                       });
    });
});
</script>

您还应该确保它.blog_posts具有正确的样式（可能position: absolute;像.load_post），以便为left属性设置动画效果。

于 2013-05-23T21:23:22.843 回答
0

现在不load_posts应该动画，因为你没有正确选择它。你需要.它之​​前的。所以$('.load_post').animate({"left": "-=1500px"}, "slow");

于 2013-05-23T21:23:34.723 回答
0

您错过了 jQuery 文件。

于 2013-05-23T21:28:03.603 回答
-1

快速查看后，我认为它需要在动画功能中没有“px”。所以替换$('.blog_posts').animate({"left": "-=1500px"}, "slow");为$('.blog_posts').animate({"left": "-=1500"}, "slow");

于 2013-05-23T21:24:58.160 回答