Jquery Slide after reveal filter

Question

I have a filter action that is working the way I want each div fades in or out on click; however when the divs fade out or in, instead of just jumping over I would like to see them slide into place.

http://theoaks.turnpostadmin.com/floor-plans/

What can I add to this to make that happen like a jquery.easing or something

Here is what I have thus far

    $(document).ready(function() {
     $('#filter a').click(function() {
      $(this).css('outline','none');
      $('#filter .current').removeClass('current');
      $(this).parent().addClass('current');

    var filterVal = $(this).text().toLowerCase().replace(' ','-');

    if(filterVal == 'all') {
        $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
    } else {

        $('ul#portfolio li').each(function() {
            if(!$(this).hasClass(filterVal)) {
                $(this).fadeOut('normal').addClass('hidden');
            } else {
                $(this).fadeIn('slow').removeClass('hidden');
            }
        });
    }

    return false;
     });
    });

Thanks

Jamie

I tried a could things but still no luck – Jamison Mar 19 '12 at 20:43 — Jamison, Mar 19 '12 at 20:43

score 0 · Answer 1 · answered Mar 19 '12 at 15:48

0

If you just want them to slide up and down rather than fadeIn and fadeOut, you can use the built-in animations: .slideUp() and .slideDown().

If you want them to first fadeOut and then slideUp, you could use this:

$(this).fadeTo('normal', 0).slideUp('normal').addClass('hidden');

You can't use .fadeOut() because when it's done, it hides the object which would keep .slideUp() from working. But, if you use .fadeTo(), it just changes the opacity and you can then run .slideUp().

answered Mar 19 '12 at 15:48

jfriend00

683,504
96
985
979

I want them to still fade in and out but slide as well. Sorry I forgot the url http://theoaks.turnpostadmin.com/floor-plans/ – Jamison Mar 19 '12 at 15:49
@Jamison - OK, my latest edits show you how to fadeOut and then slideUp. – jfriend00 Mar 19 '12 at 15:54
That kind of worked but im looking for more of something like this http://silverio.sachagreif.com/category/portfolio/ I change the code above to what you suggested but it didnt work out well http://theoaks.turnpostadmin.com/floor-plans/ – Jamison Mar 19 '12 at 16:11
@Jamison - what element in your page are you trying to animate? Remember, we don't know your page or what you have to hover/click on to make something happen. – jfriend00 Mar 19 '12 at 16:23
the floor plans need to fade and slide over. If you click on one bedroom or two bedroom or all the filter is applied – Jamison Mar 19 '12 at 16:29

Jquery Slide after reveal filter

1 Answers1