Question

我有html节点列表（div，左浮动）

 1, 2, 3, 4, 5, 6, 7

我想删除一个节点说4，4之后的所有节点，即这里5,6,7应该慢慢向左移动。

我有什么方法可以做到这一点？

PS：我在项目中只有jquery，我希望保持这种方式，而不包括很多库。

Answer 1

你可以这样做：

<强> HTML：

    <div id="1">1</div>
    <div id="2">2</div>
    <div id="3">3</div>
    <div id="4">4</div>
    <div id="5">5</div>
    <div id="6">6</div>

<强> Jquery的：

$( "div" ).click(function() {
  $( this ).hide( 2000, function() {
    $( this ).remove();
  });
});

CSS：

div {
background: green;
width: 30px;
height: 40px;
margin: 2px;
float: left;
color:white
}

DEMO

Answer 2

使用http://api.jquery.com/hide/。看那里的例子。

Answer 3

使用jQuery.hide()和jQuery.remove() 试试这个 -

   $("#4").hide('slow', function(){ $(this).remove(); });

<强>更新： -

DEMO

Answer 4

我只是使用jQuery的动画API创建一些示例。

以下示例可能会对您有所帮助。

DEMO

任何人帮助我fsfiddle链接

HTML

<p><button id="go">Run »</button></p>
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>
    <div class="block">6</div>
    <div class="block">7</div>

CSS

div {
    position: relative;
    background-color: #abc;
    width: 40px;
    height: 40px;
    float: left;
    margin: 5px;
}

JS

$( "#go" ).click(function() {
    $( ".block:nth(3)" ).css("visibility","hidden");
    $( ".block:nth(3)" ).animate({
        left: -50
    }, {
        duration: 1000,
        step: function( now, fx ){
            $( ".block:gt(3)" ).css( "left", now );
        }
    }); 
});

从列表动画中删除节点

4 个答案:

DEMO