How to move div to top and remove?


Tags: javascript,jquery,html,css

Problem :

I have two block inside container and under them button. I need, when I click on the button, then the first div slowly moves up and removed. I tried so:

HTML:

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
</div>
<button class="move">Click</button>

CSS:

.container {
    border: 2px solid blue;
    display: inline-block
}

.block {
    width: 100px;
    height: 100px;
    background: red;
    margin: 5px;
}

.move {
    display: block
}

jQuery:

$(document).ready(function() {
    $('.move').click(function() {
        $('.block:first-child').animate({scrollTop: '-100px'}, 1000, function() {
            $(this).remove();
        });
    });
});

But when I click on the button, then first .block just removed. I need to first move it up. How to fix it?

JSFiddle



Solution :

You're animating the scrollTop of the element which will not have the effect you want. You can animate the height instead. However there is also the slideUp() function which will do this for you. Try this:

$('.move').click(function() {
    $('.block:first-child').slideUp(function() {
        $(this).remove();
    });
});

Example fiddle

If you have to do it without resizing the block, you can set overflow: hidden on the container, then animate the margin-top of the block itself.

Example fiddle


    CSS Howto..

    How to make a scrolling website mobile friendly?

    How to set gulp autoprefixer that it will be prefix css when I save my project

    Example of how to load static CSS files from node_modules using webpack?

    How to Test CSS/HTML/jQuery?

    How do I hide the items within a menu until a click event?

    How to share CSS StyleSheet amongst projects?

    How can I use Perl to get a list of CSS elements with a color or background color attribute?

    How to achieve this CSS layout? [closed]

    How to center arrow on post carousel

    How to make a css media query snippet in ATOM editor

    Using Jquery to show and hide elements based on an input

    How to make a vector background image in css instead of using jpg or png

    What's the idea behind image sprites, how to approach it?

    How to customize post excerpt css

    How to set height of a div element to same as another div

    How to apply StyleSheet to MVC3 website?

    Show div on radio button check using JS fallback

    Position:Absolute; Div is making the page too wide and adding blank space to the side. How do I reduce its size?

    How can I control when my css transitions happen and when they don't?

    Rails 3 - will_paginate plugin - how to style it

    How to maintain the background image until end of the page

    How to position heading (h1) placed on a background image and centered according to it outside of its container

    CSS/Javascript: How to draw minimal border around an inline element?

    how to make a lighting effect using css/html/js [closed]

    How can I force an outer div to expand to height of inner div?

    How to set variables in LESS from a dynamic website?

    How to make SVG clip-path work correctly in Google Chrome?

    How to make a CSS horizontal navigation menu?

    How to keep a floating div centered on window resize (jQuery/CSS)

    Skeleton CSS - how to span the width of the screen?