Get a free trial // Grow your CSS skills // Land your dream job

how to make this better function and less code.

  • # November 15, 2011 at 12:07 am

    how do i make this function better without looking so jittery and glitchy and with possibly less code… (without the use of a plugin or an external function.

    # November 15, 2011 at 4:15 am

    To simplify your code, you can use multiple selectors rather than repeating line after line in each conditional… E.G.




    $(".green, .blue, .yellow").fadeOut('fast')

    As far as the glitchiness… The reason why it is occurring is because the current instance is not being removed properly before the new color instance is faded in. Hence the old instance stays visible until the new instance has completed the animation cycle resulting in a glitchy look…That should give you some help in the general direction…Good Luck!

    # November 15, 2011 at 7:59 am

    for less code maybe something like this:

    var value = $(this).val();
    if( value == 'all') {//check which radio button is clicked
    } else if(value == 'red') {
    $(".red").fadeIn('slow').siblings('.green, .yellow, .blue').hide();
    } else if(value == 'green') {
    $(".green").fadeIn('slow').siblings('.red, .yellow, .blue').hide();
    }else if(value == 'blue') {
    $(".blue").fadeIn('slow').siblings('.green, .yellow, .red').hide();
    }else if(value == 'yellow') {
    $(".yellow").fadeIn('slow').siblings('.green, .red, .blue').hide();

    im no expert though.. :)

    # November 15, 2011 at 10:02 am

    Try this (updated demo)

    $(document).ready(function() {
    // attack a click event on all radio buttons with name 'category'
    $("input[name=category]").click(function() {
    var sel = $(this).val();
    $('.' + sel).fadeIn('slow');
    if (sel !== 'box') { $('.box:not(.' + sel + ')').fadeOut('fast'); }

    I changed the radio selection value for all from “all” to “box” to match the class name of all the boxes – it just made coding easier ;)

    Oh and I removed the “:radio” from the input selector… I think it’s going away in a future version of jQuery, so might as well get rid of it now.

    # November 15, 2011 at 1:53 pm

    The example from @timmey does not work . for somereason i can’t seem to get it. and the second is partly disfunctional. when you switch from red to green to blue it words. but when going back to all, they all dissappear. and i can’t seem to figure out how to make ALL of them re-appear.

    # November 15, 2011 at 2:01 pm

    most up-to-date version.

    # November 15, 2011 at 2:28 pm

    # November 15, 2011 at 2:55 pm


    Why not just use what @Mottie did? It uses fewer lines of code. The reason why Version 7 is not working is because you didn’t change the value from all to box. :-)

    # November 15, 2011 at 4:18 pm

    ohhh in the HTML. there we go. it work. thankgoodness.
    how would i go about (code wise) fixing the glitch look… add a delay after the boxes dissappear, and before the new ones appear?

    # November 15, 2011 at 6:14 pm

    *shrug* I’m the red-headed step-child with a side of chopped liver!

    # November 18, 2011 at 2:35 am

    Totally got it! instead of fading it, i simply Hide the unselected ones. :) and shazaam! i got it! thank you so much for your help. and now i can use it for animals categories, or fav foods, or something a little more creative, like possibly wordpress image categories (like how faces works. OR for post types. filter through many post types. neat!

    thank you all for your help! much Appreciated.

    – A.Hajzer

    # November 18, 2011 at 2:35 am

    Live working with colours.

    # November 18, 2011 at 8:00 am

    Wow, it feels weird being completely ignored… I had it working with the fadeOut eight posts ago… but hey, I guess I’m glad you got it working… and you’re welcome.

    # November 18, 2011 at 8:09 am

    /me hugs @Mottie

    # November 18, 2011 at 1:39 pm

    Mottie this has been hilarious to follow.

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed