jquery css() in if else condition

Question

What I'm trying to do is IF I click on a span then some elements in a DIV get faded out and ELSE you click again on that span those elements would get faded in. There I'm also using css() to change some styles of the elements remained in that DIV .

Look HERE to check out the codes.

And now two questions/issues :

Is there some shortcut or technique by which the number of using css() could be lesser?
When I try to use css() in my else condition to take the style values to their original, none of them in my else condition work and therefore the new style values in if condition remain the same.

Any correction or suggestion ?

Im not exactly sure what your goal is.. but you can group the css together like .css({'width':'45px', 'height': '200px', 'overflow': 'hidden'}), etc but again not sure what your end goal is... — David Chase
– David Chase, Commented Mar 31, 2013 at 14:21
It seems in your code, you're manually setting css properties and adding/removing classes even though you haven't defined those classes. Are the manual properties supposed to be what the class defines? — Lix
– Lix, Commented Mar 31, 2013 at 14:22
@John, if..else is a synchronous conditional statement, what you're trying to describe is an asynchronous animation. While you'd use if..else statements in the asynchronous callback, the way you've phrased what you're after is incongruous with the meaning of the words you've used in the context of JavaScript programming. — zzzzBov
– zzzzBov, Commented Apr 1, 2013 at 2:11

zzzzBov · Accepted Answer · 2013-04-01 02:34:26Z

What I'm trying to do is IF I click on a span

No. What you're trying to do is "when you click on a span..."

then some elements in a DIV get faded out

...a div fades out.

and ELSE you click again on that span

Have you ever heard anyone say "and else you click again"? If it's not how you speak, you shouldn't write it either.

What you're trying to describe is what happens when you click on the span a second time. It's actually not important how many times the span has been clicked on, what's important is the state of the div. What you're describing goes back to what happens when the span is clicked.

those elements would get faded in.

So what you've tried to say so far is:

When you click on a span, check whether a div is visible; if it is, fade out, else, fade in.

There I'm also using css() to change some styles of the elements remained in that DIV.

It sounds like what you're trying to say is that you're also styling the div using jQuery's css method. Given the state of the code this appears to (mostly) be the case.

Don't use the css method.

It's useful to use jQuery's css method when you absolutely require dynamic styles. Most of the time, most people don't need dynamic styles. Most of the time, most people need dynamic sets of styles. These are best represented as classes that should be left in stylesheets. HTML belongs in .html files, JS belongs in .js files, CSS belongs in .css files.

So what you really want is to change a class (or multiple) when the div has finished animating.

All of that without even writing any code. To tie it all together, here's generally what you'd want to do:

$('.some-span').on('click', function () {
    //when you click on a span
    var divIsVisible;
    //check whether a div is visible
    divIsVisible = $('.some-div').is(':visible');
    if (divIsVisible) {
        //if it is, fade out
        $('.some-div').fadeOut(function () {
            //when it's done fading out, add some classes
            $(this).addClass('is-hidden');
            //add other classes
        });
    } else {
        //else fade in
        $('.some-div').fadeIn(function () {
            //when it's done fading in, remove some classes
            $(this).removeClass('is-hidden');
            //remove other classes
        });
    }
});

Thank you for going through details. And although I'm not an English-speaking person, I always try my best to speak English in the best manner I can.
And thank you again for the codes and the comments. Well-explained.

xpy · Accepted Answer · 2013-03-31 15:28:38Z

1

Of course you could also just add a class to #News and apply all your styles in your CSS

#News.closed {
    height: 45px;
    width: 200px;
    overflow: hidden;
}
#News.closed div {
    right: -10px;
}
#News.closed div label {
    font-size:12px;
    top: -14px;
}
}
#News.closed div label p {
    top: -15px;
    right: -20px;
}

demo: http://jsfiddle.net/pavloschris/7G3Z4/10/

answered Mar 31, 2013 at 15:28

xpy

5,6713 gold badges32 silver badges52 bronze badges

1 Comment

John Over a year ago

Thank you for the sample. Now I got what @zzzzBov tried to explain to me.

Lix · Accepted Answer · 2013-03-31 14:15:48Z

1

To answer one part of your question :

You can set multiple css properties in a single call by passing an object (as mentioned by the documentation -

$(elem).css({
  'width':10px,
  'height':10px,
  ...
});

answered Mar 31, 2013 at 14:15

Lix

48.2k12 gold badges107 silver badges134 bronze badges

8 Comments

John Over a year ago

so I've got to make an object using var ? any example ?

Lix Over a year ago

You don't have to declare an object with var - you can simply define it in an object literal as I did with my example.

John Over a year ago

OK. but if there are 3 elements and using them in if condition ?

Lix Over a year ago

Oh - yes, then it would make sense to create an object variable and pass the same one to multiple elements. Although... you can always pass multiple selectors and still use one literal object.

John Over a year ago

Though I need to go through some examples, I thank you for that point.

|

Collectives™ on Stack Overflow

jquery css() in if else condition

3 Answers 3

2 Comments

1 Comment

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related