jQuery: delay the function issue with each

Question

delay function not working with each.

what i am doing is when user click on close button first fadeout the popup and then remove style attribute from all li.

issue is fadeout is before the popup fadeout the style attribute is action firing , that is why i used delay to slowdown removeAttr event. but getting some issue with the code..

in one of the article i read to use index with each i tried that one but still not getting issue with.

   jQuery('.clsbb').click(function(){
   jQuery('.new-rows').fadeOut(3000);
   jQuery('.products li').each(function(index){

    jQuery(this).delay(1000 * index).removeAttr('style');
     });
       });

   <div class="clsbb">close</div>
   <ul>
      <li style="margin-top:10px;">row2</li>
       <li style="margin-top:10px;">row2</li>
        <li style="margin-top:10px;">row2</li>
         <li style="margin-top:10px;">row2</li>
           <li class="new-rows">popup</li>
   </ul>

need help to fadeout popup first then removeAttr

http://jsfiddle.net/xm5LE/2/

LeGEC · Accepted Answer · 2013-12-02 11:34:08Z

1

Use the complete argument in fadeout :

jQuery('.new-rows').fadeOut(3000, function(){
    // this code will be called after the animation completes
    jQuery('.products li').removeAttr('style');
});

[edit] complete solution :

<div class="clsbb">close</div>
<ul class="products">
    <li style="margin-top:10px;">row2</li>
    <li style="margin-top:10px;">row2</li>
    <li style="margin-top:10px;">row2</li>
    <li style="margin-top:10px;">row2</li>
    <li class="new-rows">popup</li>
</ul>

jQuery('.clsbb').click(function () {
    jQuery('.new-rows').fadeOut(3000, function () {
       jQuery('.new-rows').remove();
       jQuery('.products li').removeAttr('style');
    });
});

fiddle

edited Dec 2, 2013 at 11:34

answered Dec 2, 2013 at 10:13

LeGEC

53.4k5 gold badges69 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jack Torris Over a year ago

how can i use each in fadeout function?

LeGEC Over a year ago

@JackTorris: check your markup, nobody has the products class. Corrected : jsfiddle.net/xm5LE/1

Jack Torris Over a year ago

let us continue this discussion in chat

Rakesh Juyal · Accepted Answer · 2013-12-02 10:27:42Z

0

You can achieve this using callback methods:

jQuery('.new-rows').fadeOut(3000, function(){
  // Use callback method.
  jQuery('.products li').removeAttr('style');  // Not sure why you have used 1000 * index. Use it here as well if required.
});

Edit as per Jack Torris
jQuery('.products li').removeAttr('style'); this will remove style from all li not just one. But if you still want to use .each

jQuery('.new-rows').fadeOut(3000, function(){
  // Use callback method.
  jQuery('.products li').each ( function(){  $(this).removeAttr('style'); } );
});

edited Dec 2, 2013 at 10:27

answered Dec 2, 2013 at 10:15

Rakesh Juyal

37k74 gold badges179 silver badges218 bronze badges

2 Comments

Jack Torris Over a year ago

jQuery('.products li').removeAttr('style'); it will remove the attribute from one li only.. is it possible to use each i n fadeout funvtion?

Rakesh Juyal Over a year ago

@JackTorris jQuery('.products li').removeAttr('style'); this will remove style from all li not just one. But if you still want to use .each see my edited answer.

Collectives™ on Stack Overflow

jQuery: delay the function issue with each

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related