Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #23573 > unrolled thread

jQuery: fadeIn/out + count

Back to article view | Back to comp.lang.javascript

Contents

  jQuery: fadeIn/out + count Mattias Campe <mattiaspuntcampe@geeeemeil.com> - 2014-03-12 16:09 +0100
    Re: jQuery: fadeIn/out + count Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2014-03-12 17:50 +0100
      Re: jQuery: fadeIn/out + count Mattias Campe <mattiaspuntcampe@geeeemeil.com> - 2014-03-12 21:17 +0100
        Re: jQuery: fadeIn/out + count Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2014-03-12 18:04 -0300
          Re: jQuery: fadeIn/out + count Mattias Campe <mattiaspuntcampe@geeeemeil.com> - 2014-03-13 20:22 +0100
    Re: jQuery: fadeIn/out + count Christoph Michael Becker <cmbecker69@arcor.de> - 2014-03-13 02:05 +0100
      Re: jQuery: fadeIn/out + count Mattias Campe <mattiaspuntcampe@geeeemeil.com> - 2014-03-13 20:31 +0100

#23573 — jQuery: fadeIn/out + count

Hello

I got multiple paragraphs and some of them need to have a fadeIn, some a 
fadeOut. After that code I want to count the paragraphs that are still 
visible.

The fadeIn or fadeOut works as I expect, but not the counting. I guess 
that is because the animation is still busy, while the counting already 
starts. A kind of "parallel" processing.

Would anybody know if that is the cause and/or a solution for my problem?

	if (jQuery('input#' + geg).is(":checked")){
		jQuery("p." + geg).fadeIn();
	} else {
		jQuery("p." + geg).fadeOut();
	}

	var nSr = eval(jQuery('p.sr:visible').length); // BUG?

Kind regards
Mattias

[toc] | [next] | [standalone]

#23574

On Wed, 12 Mar 2014 16:09:36 +0100, Mattias Campe wrote:

>I got multiple paragraphs and some of them need to have a fadeIn, some a 
>fadeOut. After that code I want to count the paragraphs that are still 
>visible.
>
>The fadeIn or fadeOut works as I expect, but not the counting. I guess 
>that is because the animation is still busy, while the counting already 
>starts. A kind of "parallel" processing.
>
>Would anybody know if that is the cause and/or a solution for my problem?
>
>	if (jQuery('input#' + geg).is(":checked")){
>		jQuery("p." + geg).fadeIn();
>	} else {
>		jQuery("p." + geg).fadeOut();
>	}
>
>	var nSr = eval(jQuery('p.sr:visible').length); // BUG?

I thought one does this with CSS3, instead of using a monster
like jQuery.

Not to mention that having something fade in or out only serves
to slow down the user, but that's a more basic question.

Hans-Georg

[toc] | [prev] | [next] | [standalone]

#23579

op 12-03-14 17:50, Hans-Georg Michna schreef:
> On Wed, 12 Mar 2014 16:09:36 +0100, Mattias Campe wrote:
>
>> I got multiple paragraphs and some of them need to have a fadeIn, some a
>> fadeOut. After that code I want to count the paragraphs that are still
>> visible.
>>
>> The fadeIn or fadeOut works as I expect, but not the counting. I guess
>> that is because the animation is still busy, while the counting already
>> starts. A kind of "parallel" processing.
>>
>> Would anybody know if that is the cause and/or a solution for my problem?
>>
>> 	if (jQuery('input#' + geg).is(":checked")){
>> 		jQuery("p." + geg).fadeIn();
>> 	} else {
>> 		jQuery("p." + geg).fadeOut();
>> 	}
>>
>> 	var nSr = eval(jQuery('p.sr:visible').length); // BUG?
>
> I thought one does this with CSS3, instead of using a monster
> like jQuery.

Thank you for your answer. The code above is for an end user who has a 
long list of things and he wants to filter it, by ticking checkboxes on 
or off.

Now I would like to inform that user how long the list still is. So 
that's why I use "jQuery('p.sr:visible').length)", which doesn't give 
the correct answer. I guess that is because the animation is still busy, 
while the counting already starts. A kind of "parallel" processing. But 
I don't know the solution to that.

If the solution would be possible in CSS3: I would love to know. It 
doesn't have to be in JQuery.

> Not to mention that having something fade in or out only serves
> to slow down the user, but that's a more basic question.

I tried it without animation, but then the end user doesn't notice it 
that easy that the list changes.

Kind regards
Mattias

[toc] | [prev] | [next] | [standalone]

#23581

On 12/03/2014 17:17, Mattias Campe wrote:
> op 12-03-14 17:50, Hans-Georg Michna schreef:
>> On Wed, 12 Mar 2014 16:09:36 +0100, Mattias Campe wrote:
>>
>>> I got multiple paragraphs and some of them need to have a fadeIn, some a
>>> fadeOut. After that code I want to count the paragraphs that are still
>>> visible.
>>>
>>> The fadeIn or fadeOut works as I expect, but not the counting. I guess
>>> that is because the animation is still busy, while the counting already
>>> starts. A kind of "parallel" processing.
>>>
>>> Would anybody know if that is the cause and/or a solution for my
>>> problem?
>>>
>>>     if (jQuery('input#' + geg).is(":checked")){
>>>         jQuery("p." + geg).fadeIn();
>>>     } else {
>>>         jQuery("p." + geg).fadeOut();
>>>     }
>>>
>>>     var nSr = eval(jQuery('p.sr:visible').length); // BUG?
>>
>> I thought one does this with CSS3, instead of using a monster
>> like jQuery.
>
> Thank you for your answer. The code above is for an end user who has a
> long list of things and he wants to filter it, by ticking checkboxes on
> or off.
>
> Now I would like to inform that user how long the list still is. So
> that's why I use "jQuery('p.sr:visible').length)", which doesn't give
> the correct answer. I guess that is because the animation is still busy,
> while the counting already starts. A kind of "parallel" processing. But
> I don't know the solution to that.

I don't know jQuery, but maybe you might count how many checkboxes are 
checked. E.g. passing a form containing all the checkboxes.

function countCheckboxes(frm) {
   var elems, len, i = 0;
   elems = frm.querySelectorAll("input[type='checkbox']");
   len = elems.length;
   while (len--) {
     if (elems[len].checked) i++;
   }
   return i;
}


>
> If the solution would be possible in CSS3: I would love to know. It
> doesn't have to be in JQuery.

<https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations>

and

<https://github.com/daneden/animate.css>

>
>> Not to mention that having something fade in or out only serves
>> to slow down the user, but that's a more basic question.
>
> I tried it without animation, but then the end user doesn't notice it
> that easy that the list changes.

ACK. Sometimes I use a yellow fade animation to draw the user's attention.

-- 
Joao Rodrigues (J.R.)

[toc] | [prev] | [next] | [standalone]

#23593

op 12-03-14 22:04, Joao Rodrigues schreef:
> On 12/03/2014 17:17, Mattias Campe wrote:
>> op 12-03-14 17:50, Hans-Georg Michna schreef:
>>> On Wed, 12 Mar 2014 16:09:36 +0100, Mattias Campe wrote:
>>>
>>>> I got multiple paragraphs and some of them need to have a fadeIn,
>>>> some a
>>>> fadeOut. After that code I want to count the paragraphs that are still
>>>> visible.
>>>>
>>>> The fadeIn or fadeOut works as I expect, but not the counting. I guess
>>>> that is because the animation is still busy, while the counting already
>>>> starts. A kind of "parallel" processing.
>>>>
>>>> Would anybody know if that is the cause and/or a solution for my
>>>> problem?
>>>>
>>>>     if (jQuery('input#' + geg).is(":checked")){
>>>>         jQuery("p." + geg).fadeIn();
>>>>     } else {
>>>>         jQuery("p." + geg).fadeOut();
>>>>     }
>>>>
>>>>     var nSr = eval(jQuery('p.sr:visible').length); // BUG?
>>>
>>> I thought one does this with CSS3, instead of using a monster
>>> like jQuery.
>>
>> Thank you for your answer. The code above is for an end user who has a
>> long list of things and he wants to filter it, by ticking checkboxes on
>> or off.
>>
>> Now I would like to inform that user how long the list still is. So
>> that's why I use "jQuery('p.sr:visible').length)", which doesn't give
>> the correct answer. I guess that is because the animation is still busy,
>> while the counting already starts. A kind of "parallel" processing. But
>> I don't know the solution to that.
>
> I don't know jQuery, but maybe you might count how many checkboxes are
> checked. E.g. passing a form containing all the checkboxes.
>
> function countCheckboxes(frm) {
>    var elems, len, i = 0;
>    elems = frm.querySelectorAll("input[type='checkbox']");
>    len = elems.length;
>    while (len--) {
>      if (elems[len].checked) i++;
>    }
>    return i;
> }
>

The problem is that the number of checkboxes I have checked can not 
"predict" the number of paragraphs that are still visible. But I have 
found a solution. I'll post in in another post.

>>
>> If the solution would be possible in CSS3: I would love to know. It
>> doesn't have to be in JQuery.
>
> <https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations>
>
>
> and
>
> <https://github.com/daneden/animate.css>

Thank you for those links! I have put them on my 2DO-list :-).

>>
>>> Not to mention that having something fade in or out only serves
>>> to slow down the user, but that's a more basic question.
>>
>> I tried it without animation, but then the end user doesn't notice it
>> that easy that the list changes.
>
> ACK. Sometimes I use a yellow fade animation to draw the user's attention.
>

Nice tip as well!!

Thank you for your time and advice!

Greetings
Mattias

[toc] | [prev] | [next] | [standalone]

#23582

Mattias Campe wrote:

> I got multiple paragraphs and some of them need to have a fadeIn, some a
> fadeOut. After that code I want to count the paragraphs that are still
> visible.
> 
> The fadeIn or fadeOut works as I expect, but not the counting. I guess
> that is because the animation is still busy, while the counting already
> starts. A kind of "parallel" processing.
> 
> Would anybody know if that is the cause and/or a solution for my problem?

Indeed, the "parallel processing" is the cause of your problem.  The
fadeIn() and fadeOut() methods trigger an animation (the implementation
might use window.setInterval() or window.setTimeout()), which is
obviously not finished when you access the length property.

A solution might be to do the count "manually" in the if-else statement.
 An alternative would be to delay the counting until the animation has
finished.

>     if (jQuery('input#' + geg).is(":checked")){
>         jQuery("p." + geg).fadeIn();
>     } else {
>         jQuery("p." + geg).fadeOut();
>     }
> 
>     var nSr = eval(jQuery('p.sr:visible').length); // BUG?

The behavior is not a bug (maybe a documentation bug for the
fadeIn()/fadeOut() methods), but your use of eval() is superfluous at best.

Please note that this newsgroup might not be the best place to ask
questions related to jQuery, as the newsgroup's FAQ states[1]:

| No javascript libraries are endorsed by this group. If you want help
| with using a library, visit that library's discussion group instead.

IMHO it is best to avoid libraries like jQuery until you have a good
understanding of ECMAScript and the DOM and their (widespread)
implementations, so you can judge the value of such libraries.

[1] <http://pointedears.de/scripts/faq/cljs/#libraryResources>

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#23594

op 13-03-14 02:05, Christoph Michael Becker schreef:
> Mattias Campe wrote:
>
>> I got multiple paragraphs and some of them need to have a fadeIn, some a
>> fadeOut. After that code I want to count the paragraphs that are still
>> visible.
>>
>> The fadeIn or fadeOut works as I expect, but not the counting. I guess
>> that is because the animation is still busy, while the counting already
>> starts. A kind of "parallel" processing.
>>
>> Would anybody know if that is the cause and/or a solution for my problem?
>
> Indeed, the "parallel processing" is the cause of your problem.  The
> fadeIn() and fadeOut() methods trigger an animation (the implementation
> might use window.setInterval() or window.setTimeout()), which is
> obviously not finished when you access the length property.
>
> A solution might be to do the count "manually" in the if-else statement.
>   An alternative would be to delay the counting until the animation has
> finished.
>
>>      if (jQuery('input#' + geg).is(":checked")){
>>          jQuery("p." + geg).fadeIn();
>>      } else {
>>          jQuery("p." + geg).fadeOut();
>>      }
>>
>>      var nSr = eval(jQuery('p.sr:visible').length); // BUG?
>
> The behavior is not a bug (maybe a documentation bug for the
> fadeIn()/fadeOut() methods), but your use of eval() is superfluous at best.

I didn't mean it as a bug in JavaScript or jQuery, but it didn't work 
the way I was "hoping" it to work. So the fault is all mine.

I solved it by doing a "jQuery('p.sr:visible').length;" before any 
animation and per fadeIn I do a nSr++ and per fadeOut a nSr--, in the 
if-else statement. That seems to work, so thank you for the tip. And I 
have omitted the eval().

> Please note that this newsgroup might not be the best place to ask
> questions related to jQuery, as the newsgroup's FAQ states[1]:
>
> | No javascript libraries are endorsed by this group. If you want help
> | with using a library, visit that library's discussion group instead.
>
> IMHO it is best to avoid libraries like jQuery until you have a good
> understanding of ECMAScript and the DOM and their (widespread)
> implementations, so you can judge the value of such libraries.
>
> [1] <http://pointedears.de/scripts/faq/cljs/#libraryResources>
>

I didn't notice that FAQ. I should indeed invest some time to have a 
good understanding of it. But I was already happy to "assume" it might 
be because of "the parallel processing" :-). And sometimes the proof of 
the pudding is in the eating :-).

Kind regards
Mattias

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web