Question

我是jQuery的新手。我试图隐藏我点击的div，然后使用animate按下它旁边的4个div。在此之后，我想在点击的div之后追加空格中的另外4个div。

我试过这个

这是我的代码

 (function () {
     $('#ccc').on('click', '.box', function () {
         var i = 0;
         $(this).fadeOut().nextAll().slice(0, 4).animate({
             top: '100px'
         }, function () {
             i++;
             if (i == 4) {
                 $(this).after('<div class="lt box"></div><div class="rt box"></div><div class="lt box"></div><div class="rt box"></div>');
             }
         });

     });

 })();

这是小提琴：http://jsfiddle.net/ue7Gp/2/

提前致谢

Answer 1

花了一些时间，但试试这个FIDDLE。如果这不是所需的功能，请告诉我。希望能帮助到你。你发布的原版的主要问题是顶部：100px样式被保留，这导致了这个差距。

更新：我调整了javascript，所以只调用一次动画回调，这样你就可以摆脱你的计数器了。

编辑2：我更新了下面的小提琴和代码，以反映您没有删除点击框的请求。我希望这有帮助

  (function () {
     $('#ccc').on('click', '.box', function (e) {
         var i = 0;
         $(e.currentTarget).fadeOut();
         $(e.currentTarget).nextAll().stop().animate({
            "top": "220px"
         }).promise().done( function () {
                 $(e.currentTarget).after('<div class="lt box"></div>
                 <div class="rt box"></div><div class="lt box"></div>
                 <div class="rt box"></div>').remove();
             $(".box").removeAttr("style");  
         });

     });

 })();



.box {
    width:100px;
    height:100px;
    background-color:red;
    position:relative;
    margin-bottom: 10px;
    float:left;
     margin:5px;
}

#ccc {
    width:220px;
}

Answer 2

我知道你的问题，我已经为你工作了。它应该足以让你走上正轨！左右浮动不是理想的IMO。希望它有所帮助！

更新小提琴： http://jsfiddle.net/ue7Gp/3/

JS：

$('#ccc').on('click', '.box', function () {
    $(this).fadeOut(function(){
        if ($(this).hasClass("lt")){
            var startwith = "lt";
            var endwith = "rt";
        } else {
            var startwith = "rt";
            var endwith = "lt";
        }
        for (x=0; x<2; x++){
            $(this).parent().prepend($('<div class="' + startwith + ' box"></div><div class="' + endwith + ' box">').hide().fadeIn("slow"));
        }
    });
});

推下div并附加div

2 个答案: