Smooth Umordnung von Div-Boxen, nachdem man sich versteckt, wie?

Question

Also habe ich eine Liste von Boxen mit etwas Inhalt .. Ich habe eine Swipe-Funktion hinzugefügt, die die gewünschte Box verbirgt. Das Problem ist, dass, wenn diese Box sich versteckt, die darunter liegende sehr schnell hochgeht und das überhaupt nicht glatt aussieht. Was ich nachahmen möchte, ist der reibungslose Effekt der Neuanordnung von Boxen, wenn sich eine Box wie bei Google Now Cards aufgrund eines Wischens versteckt. Ich habe einen Schnipselauftrag gemacht, um zu versuchen zu erklären, was ich besser meine.

Wenn Sie auf Box 2 klicken, wird die Box ausgeblendet und Box 3 wird angezeigt, um Box 2 zu ersetzen, aber es geht schnell. Wie kann ich diese Umordnung verlangsamen? Id schätzen irgendwelche Ratschläge Sie

$('.container').on('click', '#b2', function() { 
 
    $(this).fadeOut(600); 
 
});

.container { 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 

 
.box { 
 
    height: 30px; 
 
    width: 400px; 
 
    background-color: yellow; 
 
} 
 

 
h3 { 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="box" id="b1"> 
 
    <h3>This is box 1</h3> 
 
    </div> 
 
    <div class="box" id="b2"> 
 
    <h3>This is box 2</h3> 
 
    </div> 
 
    <div class="box" id="b3"> 
 
    <h3>This is box 3</h3> 
 
    </div> 
 
</div>

Answer 1

Sie toggle() geben statt fadeOut

$('.container').on('click', '#b2', function() { 
    $(this).toggle("slow", function() { 
    // Animation complete. 

    }); 
}); 

Geige example

Answer 2

Statt fadeOut() verwenden können, die Sie verwenden können slideUp()

$('.container').on('click', '#b2', function() { 
    $(this).slideUp("slow", "linear", function() { 

    }); 
}); 

Answer 3

fand ich eine Antwort, die ich denke, genau das tut, was Sie wollen:

How to animate divs when they move to fill empty space left by other divs that fade out

Die jQuery-Code so sein würde ich denken:

$('.container').on('click', '#b2', function() { 
    $(this).animate({ 
     'height': 0, 
     'opacity': 0 
    }, 750, function() { 
     $(this).remove(); 
    }); 
}); 

Answer 4

Wie wäre es damit ...

$('.container').on('click', '#b2', function() { 
 
    $(this).fadeTo(600, 0); 
 
    $(this).animate({height: "0px"}, 600, function(){ 
 
    $(this).hide(); 
 
    }); 
 
});

.container { 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 

 
.box { 
 
    width: 400px; 
 
    height: 50px; /*Adjusted height*/ 
 
    background-color: yellow; 
 
} 
 

 
h3 { 
 
    text-align: center; 
 
    margin:auto 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="box" id="b1"> 
 
    <h3>This is box 1</h3> 
 
    </div> 
 
    <div class="box" id="b2"> 
 
    <h3>This is box 2</h3> 
 
    </div> 
 
    <div class="box" id="b3"> 
 
    <h3>This is box 3</h3> 
 
    </div> 
 
</div>