Jquery：動畫高度

好吧，我的動畫元素仍然存在一些問題。我得到了一些幫助，我幾乎得到它，但我仍然有一個問題。我試圖找到一個解決方案，但我找不到任何東西。Jquery：動畫高度

當我點擊第一行時，它動畫的第一行。當我點擊第二行時，它動畫第一行&第二行。當我點擊第三行時，它會動畫第一個，第二個&，等等。

我希望它只有屬於該行的一個動畫。並不是所有的人都一次。

我的劇本是這樣的：

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

什麼我還是做錯了什麼？

來源

2011-09-06 Kaizokupuffball

兩個快速備註：

對於你的數據庫中找到的每個用戶，你的腳本將回聲所需的信息下面的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上都有動畫效果。

來源

2011-09-06 17:14:27 Prusprus

對所有用戶容器使用相同的ID new_user。 id是唯一屬性，並且此代碼違反了html結構。在這裏只使用class而不是id。

http://jsfiddle.net/QswrL/

來源

2011-09-06 17:20:47

Jquery：動畫高度

回答

相關問題