Php jQuery.animate不起作用

我不知道为什么，但是其中一个div，.load\u post，但是.blog\u posts没有动画。我不明白为什么。这是我的密码：

page1.php（主页）

$（文档）.ready（函数（）{
$（'.blog_posts'）.load（'blog_feed.php'）；
});
博客帖子

page2.php（加载div并设置其动画）

$（'.post'）。单击（函数（）{
var值=$（this.attr（'rel'）；
$（'.load_post'）.html（'load…'））.load（'load_post.php？value='+value）；
$（'load_post'）。设置动画（{“left”：“-=1500px”}，“slow”）；
$（'.blog_posts'）.animate（{“left”：“-=1500px”}，“slow”）；
});

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

---

有人能看到为什么博客文章没有动画的问题吗？我无法理解它为什么不向左移动。

将此添加到

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>

$（文档）.ready（函数（）{
$（'.blog_posts'）.load（'blog_feed.php'）；
$（document）.on（'click'，'.post'，function（）{
var值=$（this.attr（'rel'）；
$（'.load_post'）.html（'加载…'））
.load（'load_post.php？value='+value，function（）{
$（this.animate（{“left”：“-=1500px”}，“slow”）；
$（'.blog_posts'）.animate（{“left”：“-=1500px”}，“slow”）；
});
});
});

---

您还应该确保

.blog\u posts

具有适当的样式（可能是

位置：绝对；

类似

.load\u post

），以便设置

left

属性的动画效果。

现在

加载\u posts

不应该设置动画，因为您没有正确选择它。您需要在它之前输入

。所以

$（'.load_post'）。设置动画（{“left”：“-=1500px”}，“slow”）
快速查看后，我认为动画功能中需要没有“px”。
因此，替换
$（'.blog_posts'）。动画（{“left”：“-=1500px”}，“slow”）带有
$（'.blog_posts'）。动画（{“left”：“-=1500”}，“slow”）
您错过了jQuery文件
 看起来你在问一个jQuery问题，为什么90%的内容是php/mysql？尝试隔离问题，获取最小的渲染HTML以重现问题并将其抛出，否则加载帖子时会出现错误。缺少句点$（'load_post'）。动画（{“left”：“-=1500px”}，“slow”）
.animate（）
可以与“px”一起使用，下面是他们文档中的一个演示：jQuery包含在head.php文件中。您是否尝试过将
.blog\u posts
设置为
位置：绝对如
.load\u post
？是的，没有显示错误消息。我添加了发布在这里的js代码，并从另一个页面中删除了代码。对不起，我想我在你回复时写了另一条评论。可以尝试添加
位置：绝对top
和
left
属性对
.blog\u posts
进行编码，就像
.load\u post
一样？现在它的内容是
$（'load\u post'）。动画（{“left”：“-=1500px”}，“slow”）它应该是
$（'.load_post'）。动画（{“left”：“-=1500px”}，“slow”）加载\u post
之前使用
进行编码。
<?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>

<?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>    

<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>