Question

好的，我的动画元素仍然存在一些问题。我早些时候得到了一些帮助，我几乎得到了它，但我还有一个问题。我试着寻找解决方案，但我找不到任何东西。

当我点击第一行时，它会动画第一行。当我点击第二行时，它会动画第一行＆amp;第二行。当我点击第三行时，它会动画第一行，第二行和第二行。第三，等等。

我希望它只为属于该行的那个设置动画。并非所有这些都是一次性的。

我的脚本如下所示：

<script> $(document).ready(function() { $("#new_user").live("click", function() { $(this).children(".new_users_box").animate({opacity: 'toggle' }); }); }); </script>

我的html / php代码如下：

    <div id="new_memb_content" class="box_square">
    <img src="mysite/resources/newest-members.png" width="245" height="27" style="margin-left:-8px;" /><br><br>
        <?php
        if ($_SESSION['username'])
        {
            include 'db_connect.php';
            $sql = "SELECT username, id, gender, user_thumb1 FROM members ORDER BY members.`id` DESC LIMIT 20";
            $result = mysql_query($sql);

            while ($row = mysql_fetch_array($result))
            {
                $thumb1 = $row['user_thumb1'];
                $new_id = $row['id'];
                $new_user = $row['username'];

                echo '
                <div id="new_user">
                <a class="box_round" style="background-color:#101010 !important;">'.$new_user.'</a>
                <div class="box_newest new_users_box"><br>
                <a href="mysite/user.php?id='.$new_id.'"><img class="new_user_thumb" src="'.$thumb1.'" /></a>
                </div>
                ';
            }
        }

        else 
        header("location:mysite");
        ?>
        </div>

我还有什么问题？

Answer 1

两个快速评论：

对于数据库中的每个用户，您的脚本将使用所需信息回显以下div：

<div id="new_user">
                <a class="box_round" style="background-color:#101010 !important;">'.$new_user.'</a>
                <div class="box_newest new_users_box"><br>
                <a href="mysite/user.php?id='.$new_id.'"><img class="new_user_thumb" src="'.$thumb1.'" /></a>
                </div>

将为从数据库返回的每个用户生成div #new_user。 ID是唯一的，所以当它们在while循环中声明时，最好为ID添加后缀。一个想法是在while循环中实现一个计数器来添加div的ID。

我不确定相同的ID是否被解雇或者它们仍然有效，但修复此问题将是您的第一步。好像你的脚本在每个#new_user div上都是动画。

Answer 2

您对所有用户容器使用相同的ID new_user。 id是唯一属性，此代码违反了html结构。在这里只使用class而不是id。

http://jsfiddle.net/QswrL/

Jquery：动画高度

2 个答案: