how to animate “simple jquery filtering” by using css only


Tags: javascript,css,sorting,animation,filtering

Problem :

I'm trying to animate the elements when they are filtered by javascript but the codes below don't work. Any suggestion? This is what I have so far. http://jsfiddle.net/ejkim2000/J7TF4/

$("#ourHolder").css("animation","scaleUp 0.3s linear 0.4s forwards");

$("#ourHolder").css({"animation" : "scaleDown 0.3s linear 0.4s forwards"});

On second thought, is there any other way that I can animate the elements by using css only?



Solution :

I suggest you do it using CSS transitions. I believe this is what you're trying to do, but I can't find the referenced 'scaleDown' animation anywhere. My solution animates both width and height of the .item elements when toggling an additional '.hidden' class on them:

#ourHolder div.item.hidden {
    transition: all 0.3s linear
}

#ourHolder div.item.hidden {
    width: 0;
    height: 0;
    overflow: hidden;
}

Full solution on http://jsfiddle.net/5pKwy/

EDIT: Fiddle using min-height and min-width: http://jsfiddle.net/5pKwy/1/


    CSS Howto..

    Showing images conditionally

    How can I achieve float left at bottom and float right at top with css flexbox?

    How can I make a CSS glass/blur effect work for an overlay?

    How to CSS a two column list of items?

    How to re-size an image inserted via tag?

    How to define a document in javascript? WebStorm

    How to target content through css

    How to make a pentagon fold in half with CSS animation?

    How to use jQuery to detect loaded background image after inserting out CSS

    Meteor: How can I use Spacebars to apply different CSS elements?

    How to center field_with_errors class

    How to add a mobile optimised external CSS to a Shopify site

    How to remove a CSS class from a Wicket component?

    CSS: How to override a class style with an enclosing div

    how to arrange the sequence of js and css files in webpage?

    How to select lowest level ul in nested ul in Javascript/ css

    How to customize the HTML5 input range type looks using CSS?

    How do I change the css gradient values when my progress bar value changes?

    How to make a drop-right menu?

    How to display just part of image on hover?

    How to avoid CSS selector applying to more than one level of descendants

    How can I prevent my li's from going below my menu even if there is no room?

    How to create a QT plugin that customizes UI?

    why is the space (shown in image) is added below when using vertical-align? How to fix it?

    Class inside of Div not showing properly

    How to add another two full width sections below (CSS)

    How come my divs are jumping around during a transition?

    How to ask browsers to refresh (flush) the cache of my website?

    How to wrap a div vertically and then horizontally

    CSS - How to float correctly into pseudocolumns