jQuery Loop Issue

Question

Could you have a look through this code and let me know whats wrong? Basically it is a div that needs to fadeIn and fadeOut between 2 values and repeat this continuously. Also the div needs to be clickable during the animation.

Any help is appreciated!

What the code is supposed to do:

$("#p16-1-next").show(p16loop());
$(function(p16loop) {
    Fadeto 50%
    FadeTo 10%
    Repeat fade sequence    
});

The code i have written

$("#p16-1-next").show(p16loop());
$(function(p16loop) {
    $("#p16-1-next").fadeTo("slow", 0.5, function ()    {
        $("#p16-1-next").fadeTo("slow", 0.1, p16loop);  
    });
});

Thought i would just point out that you cant have a function inside an if statement, which may have caused my problem. — Undefined
– Undefined, Commented Dec 7, 2011 at 11:01

Gabriele Petrioli · Accepted Answer · 2011-12-06 14:22:39Z

3

This should do it

$("#p16-1-next").show(p16loop);

function p16loop() {
    $(this).fadeTo("slow", 0.5, function ()    {
        $(this).fadeTo("slow", 0.1, p16loop);  
    });
};

Demo at http://jsfiddle.net/gaby/YeNG6/1/

answered Dec 6, 2011 at 14:22

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

Comments

Yoshi · Accepted Answer · 2011-12-06 14:56:55Z

1

As I wrote in one of your early questions: To chain animations, there is no need to use the on-complete callback.

http://jsfiddle.net/HLjzz/1/

$("#p16-1-next").show(0, function p16loop () {
  $(this)
  .fadeTo("slow", 0.5)
  .fadeTo("slow", 0.1, p16loop);
});

edited Dec 6, 2011 at 14:56

answered Dec 6, 2011 at 14:27

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

7 Comments

RightSaidFred Over a year ago

+1 While passing a function as the first argument to show() isn't supported, it seems to be harmless. To make it a technically supported use of the API, you could do $("#p16-1-next").show( 0, function p16loop () {....

Gabriele Petrioli Over a year ago

@RightSaidFred, passing a function is supported officially.. If you see the docs the third case is show( [duration] [, easing] [, callback] ). The [] mean optional, so it can very well be you opt to exclude the duration and easing but opt to include the callback.. which is what is happening in this case..

RightSaidFred Over a year ago

@GabyakaG.Petrioli: Yes, you're absolutely right. The docs show exactly that, and I followed the code through to verify it, and it is indeed covered here: github.com/jquery/jquery/blob/1.6.2/src/effects.js#L321-322

RightSaidFred Over a year ago

@GabyakaG.Petrioli: But they why do they show duration as required in with the second signature .show( duration [, callback] )? If all 3 are optional, then they seem to conflict.

Yoshi Over a year ago

@GabyakaG.Petrioli & @RightSaidFred I think, after all it's not really that important. As, with no actuall animation, the usage of the show callback is rather obsolete. One could achive the same result by just using show() and afterwards use a self-calling function expression. It's a matter of taste, I think.

|

Collectives™ on Stack Overflow

jQuery Loop Issue

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related