I want to add a subtle fade effect as li gets removed from the ul. I added this piece of CSS:

-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;

on my li

However, when I remove that li using $(this).remove(); the li gets removed but there is no animation seen.

What am I missing?

EDIT I don't want to use Jquery fadeOut. I want to be able to use CSS3 animations.

I want to add a subtle fade effect as li gets removed from the ul. I added this piece of CSS:

-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;

on my li

However, when I remove that li using $(this).remove(); the li gets removed but there is no animation seen.

What am I missing?

EDIT I don't want to use Jquery fadeOut. I want to be able to use CSS3 animations.

• javascript
• jquery
• html
• css

• I want to use remove and still have animation in CSS3. Is this possible? – Jack Commented Apr 17, 2015 at 6:01

6 Answers 6

Here is a CSS way of doing it.

FIDDLE: http://jsfiddle/moc1jt05/

HTML:

<ul>
    <li>hellow world 1!!</li>
    <li>hellow world 2!!</li>
</ul>

CSS:

li {
    transition: all 0.2s ease;
    opacity: 1;
}
li.hide {
    opacity: 0;
}

JQUERY:

$("li").on("click", function() {
    $(this).addClass("hide");
});

Oh! You just need some magic of transitionend event.

// start transition animation on click
$(document).on('click', 'li', function() {
  $(this).addClass('removed');
});

// remove li on transition animation end
$(document).on('transitionend', '.removed', function() {
  $(this).remove();
});

li {
  cursor: pointer;
  border: 3px solid red;
  margin: 2px;
  padding: 5px;
}

.removed {
  transition: all 0.5s ease-out;
  opacity: 0;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu 3</li>
    <li>menu 4</li>
</ul>

You can try something like this

$('li').click(function(){
    $(this).hide(1000,function(){
        $(this).remove()
})
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ul>

Try fading out and then removing the element:

$(this).fadeOut(200, function() {
    $( this ).remove();
});

You can try this

<ul>
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu 3</li>
    <li>menu 4</li>
</ul>

with JS

$('li').on('click',function(){
    $(this).slideUp('slow');
    //You can also use time delay
    //$(this).slideUp(1000);
});

fiddle link fiddle

See the Code Snippet - Below -

You should use fadeOut() for animation effect

$('li').click(function(){
    $(this).fadeOut(1000,function(){
        $(this).remove()
})
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul>
    <li>click</li>
    <li>click</li>
    <li>click</li>
    <li>click</li>
    <li>click</li>
    <li>click</li>
    <li>click</li>
</ul>