1

ここで私のフィドルを参照してください: http://jsfiddle.net/nnHQp/1/

HTML:

 <div class="box box1"><a href=#delete">Delete</a></div>
 <div class="box box2"><a href=#delete">Delete</a></div>
 <div class="box box3"><a href=#delete">Delete</a></div>
 <div class="box box4"><a href=#delete">Delete</a></div>

CSS:

.box {
width: 150px;
height: 300px;
    margin-right: 5px;
}
.box1 {
background-color: tomato;
    float: left;
    display: inline-block;
}
.box2 {
background-color: red;
    float: left;
    display: inline-block;
}
.box3 {
background-color: green;
    float: left;
    display: inline-block;
}
.box4 {
background-color: black;
    float: left;
    display: inline-block;
 }

これらのボックスの 1 つが削除されると、残りのボックスがスライドし、次のボックスが代わりになります。JQueryでこれを達成するにはどうすればよいですか?

4

5 に答える 5

1

これを見る

http://jsfiddle.net/nnHQp/11/

   $('a').click(function(){
       $(this).parent().hide('slow');
   });
于 2013-04-19T16:26:10.977 に答える
1

これが私の試みです。実際にスライドをミラーリングしているので（幅を変更していません）、私はそれが好きです。YMMV:

$('.box a[href=#delete]').click(function(event) {
    event.preventDefault();
    var boxes = $('.box');
    var box = $(this).parent('.box');
    box.css('visibility','hidden').next().animate({
        marginLeft: '-='+box.width()
    },400);
});
于 2013-04-19T16:50:51.643 に答える