Question

我不知道为什么但是其中一个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没有动画的问题？我无法弄清楚它为什么不向左移动。

Answer 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属性设置动画。

Answer 2

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

Answer 3

您错过了jQuery文件。

Answer 4

快速查看之后，我认为它必须在animate函数中没有“px”。因此，将$('.blog_posts').animate({"left": "-=1500px"}, "slow");替换为$('.blog_posts').animate({"left": "-=1500"}, "slow");

jQuery .animate不起作用

4 个答案: