如何使用javascript通过单击按钮淡出列表？_Javascript_Php_Jquery

如何使用javascript通过单击按钮淡出列表？

javascript php jquery

如何使用javascript通过单击按钮淡出列表？,javascript,php,jquery,Javascript,Php,Jquery,我目前在淡入和用javascript显示另一个用户时遇到问题，我能够从数据库中获取数据，但淡入不起作用在下面，我按照代码出现的顺序添加了代码： <?php $conn = mysqli_connect("localhost","username","password","subscribers"); ?> <!DOCTYPE html> <head> <style> *{margin:0;padding:0;} #facebook

我目前在淡入和用javascript显示另一个用户时遇到问题，我能够从数据库中获取数据，但淡入不起作用

在下面，我按照代码出现的顺序添加了代码：

<?php
  $conn = mysqli_connect("localhost","username","password","subscribers");
?>
<!DOCTYPE html>
<head>
  <style>
  *{margin:0;padding:0;}
  #facebook{
    height:60px;
    width:250px;
    overflow:hidden;
    padding:6px 10px 14px 10px;;
  }
  #facebook li{
    border:0; margin:0; padding:0; list-style:none;
  }
  #facebook li{
    height:60px;
    padding:5px;
    list-style:none;
  }
  #facebook a{
    color:#000000;
    text-decoration:none;
  }
  #facebook .user-title{
    display:block;
    font-weight:bold;
    margin-bottom:4px;
    font-size:11px;
    color:#36538D;
  }
  #facebook .addas{
    display:block;
    font-size:11px;
    color:#666666;
  }
  #facebook img{
    float:left;
    margin-right:14px;
    padding:4px;
  }
  #facebook .del
  {
    float:right; font-weight:bold; color:#666666
  }
  #facebook .del a
  {
    color:#000000;
  }
  #facebook .del a:hover
  {
    background-color:#36538D;
    padding-left:1px;
    padding-right:1px;
    color:#ffffff;
  }
  </style>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>
<body>
  <ul id="facebook">
  <?php
    $sql=mysqli_query($conn,"SELECT * FROM users2 LIMIT 10");
    while($row=mysqli_fetch_array($sql))
    {
      $user_id=$row['id'];
      $user_name=$row['name'];
      $user_image=$row['image'];
  ?>
    <li id="list<?php echo $user_id; ?>">
      <img src="<?php echo $user_image; ?> " />
      <span class="del"><a href="#" class="delete" id="<?php echo user_id; ?>">X</a></span>
      <a href="" class="user-title"><?php echo $user_name;?> </a>
      <span class="addas">Add as Friend</span>
    </li>
  <?php
  }
  ?>
  </ul> 
  </script>
  <script type="text/javascript" >
  $(function()
    {
      $(".delete").click(function(){
      var element = $(this);
      var I = element.attr("id");
      $('li#list'+I).fadeOut('slow', function() {$(this).remove();});
      return false;
    });
  });
</script>
</body>
</html>


*{边距：0；填充：0；}
#脸谱网{
高度：60px；
宽度：250px；
溢出：隐藏；
填充：6px 10px 14px 10px；；
}
#李彦宏{
边框：0；边距：0；填充：0；列表样式：无；
}
#李彦宏{
高度：60px；
填充物：5px；
列表样式：无；
}
#facebook a{
颜色：#000000；
文字装饰：无；
}
#用户名称{
显示：块；
字体大小：粗体；
利润底部：4倍；
字体大小：11px；
颜色：#36538D；
}
#facebook.addas{
显示：块；
字体大小：11px；
颜色：#666666；
}
#脸书img{
浮动：左；
右边距：14px；
填充：4px；
}
#facebook.del
{
浮动：右；字体大小：粗体；颜色：#666666
}
#facebook.dela
{
颜色：#000000；
}
#戴尔a：悬停
{
背景色：#36538D；
左侧填充：1px；
右侧填充：1px；
颜色：#ffffff；
}

将类添加到LI元素中，然后改用“最近的”：
<li class="myLi" id="list<?php echo $user_id; ?>">
<img src="<?php echo $user_image; ?> " />
<span class="del"><a href="#" class="delete" id="<?php echo user_id; ?>">X</a></span>
<a href="" class="user-title"><?php echo $user_name;?> </a>
<span class="addas">Add as Friend</span>
</li>

单击是否删除链接触发器？
<script type="text/javascript" >
$(function()
{
$(".delete").click(function(){

$(this).closest('.myLi').fadeOut('slow', function() {$(this).remove();});
return false;
});
});
</script>