Forums

attilahajzer

http://jsfiddle.net/attilahajzer/dRqjK/

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.

kgscott284

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

This:


$(".red").fadeIn('slow');
$(".green").fadeOut('fast');
$(".blue").fadeOut('fast');
$(".yellow").fadeOut('fast');

Becomes:


$(".red").fadeIn('slow');
$(".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!

timmey

for less code maybe something like this:


                var value = $(this).val();
                if( value == 'all') {//check which radio button is clicked 
                    $(".box").fadeIn('slow');
                } 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.. :)

Mottie

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.

attilahajzer

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.

attilahajzer

http://jsfiddle.net/dRqjK/7/

most up-to-date version.

attilahajzer

http://jsfiddle.net/dRqjK/28/

Adman

@attilahajzer,

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. :-)

attilahajzer

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?

Mottie

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

attilahajzer

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

attilahajzer

Live working with colours.
http://jsfiddle.net/attilahajzer/cCrky/embedded/result/

Mottie

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.

Robskiwarrior

/me hugs @Mottie

TheDoc

Mottie this has been hilarious to follow.

standuncan

+1

Mottie

LOL thanks guys... wait, how am I hilarious? o.O

standuncan

More-so it's the situation I'd say.

attilahajzer

thank you mottie. sorry for not thanking you. and you were right.

treehouse : what would you like to learn today?

Forums

[Solved] how to make this better function and less code.