gpt4 book ai didi

php - jQuery .animate 不起作用

转载 作者:行者123 更新时间:2023-11-30 23:18:02 28 4
gpt4 key购买 nike

我不知道为什么,但是其中一个 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 没有动画的问题?我不明白为什么它不向左移动。

最佳答案

将此添加到 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属性(property)做某事。

关于php - jQuery .animate 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16724068/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com