Question

我希望在我remove之后为其他<ul id="fds"> <li> <h3>one</h3> <p>Hello guys</p> <p> <button class="remove">x</button> </p> </li> <li> <h3>two</h3> <p>Hello guys</p> <p> <button class="remove">x</button> </p> </li> <li> <h3>three</h3> <p>Hello guys</p> <p> <button class="remove">x</button> </p> </li> <li> <h3>four</h3> <p>Hello guys</p> <p> <button class="remove">x</button> </p> </li> </ul>的“向上移动”添加效果。这里是html：

$("#fds").delegate(".remove", 'click', function() {
    var $li = $(this).closest("li");
  $li.fadeOut(300, function() {
    $li.remove();
  })
})

这里的JavaScript：

db.teams.insert({
    team_id: "spa2",
    date_founded: new Date("Nov 04, 1914"),
     league: "La Liga",
    points: 72,
    name: "Real Madrid",
     players: [ { p_id: "Ronaldo", goal: 135, caps: 134, age: 28 },
                { p_id: "Bale", goal: 75, caps: 45, age: 27 },
                { p_id: "Marcelo", goal: 11, caps: 25, age: 31 },
              { p_id: "Benzema", goal: 125, caps: 95, age: 22 } ]
    });

Here一个JS来测试这个。

Answer 1

这样，在动画完成后，元素将被隐藏。

$li.animate({ 
   height: 0, 
   opacity: 0,
}, 'slow', function(){
   $(this).hide();
});

https://jsfiddle.net/L0prkrct/19/

Answer 2

将上边距设置为减去高度以提供更好的用户体验。

＆＃13;

$("#fds").delegate(".remove", 'click', function() {
    var $li = $(this).closest("li");
    
  $li.css({opacity: 0}).animate({marginTop: -1 * $li.height()}, 400, function() {$li.remove();})
})

＆＃13;

li
{
border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="fds">
  <li>
    <h3>one</h3>
    <p>Hello guys</p>
    <p>
      <button class="remove">x</button>
    </p>
  </li>
  <li>
    <h3>two</h3>
    <p>Hello guys</p>
    <p>
      <button class="remove">x</button>
    </p>
  </li>
  <li>
    <h3>three</h3>
    <p>Hello guys</p>
    <p>
      <button class="remove">x</button>
    </p>
  </li>
  <li>
    <h3>four</h3>
    <p>Hello guys</p>
    <p>
      <button class="remove">x</button>
    </p>
  </li>
</ul>

＆＃13;

Answer 3

我觉得像this这样的东西接近你想要的东西。

只需在fadeOut之前添加$li.animate({ height: 'toggle', opacity: 'toggle' }, 'slow');。

这里你的JSfiddle已更新。 https://jsfiddle.net/L0prkrct/16/

删除div后添加效果

3 个答案: