jQuery Animate Callback not Working

Question

I can't seem to get this jQuery callback to work for me. Any ideas? BTW, please don't worry about the variables, I have a special project this is for.

$("#" + circle - 1).animate({
    opacity: 0,
    "margin-top": "50",
    height: '150px',
    width: '150px'
 }, 1000, function() {
    $("#" + circle).animate({
        opacity: 1,
        "margin-top": "50",
        height: '150px',
        width: '150px'
    }, 1000);
 });

What does "not working" mean? Can you create a jsFiddle.net example? — j08691
– j08691, Commented Jun 19, 2013 at 18:38
It does not run the callback or the main parent function... This will not work in a JSFiddle, because it's just part of a much larger program. Sorry! :( — Noah
– Noah, Commented Jun 19, 2013 at 18:38
Try replacing "margin-top" with marginTop: <-- and don't add quotes. — Derek Story
– Derek Story, Commented Jun 19, 2013 at 18:39
jsfiddle.net/x2Ddp/1 The code is fine, your problem is elsewhere — Smeegs
– Smeegs, Commented Jun 19, 2013 at 18:40

PSL · Accepted Answer · 2013-06-19 18:50:27Z

1

Either you have an issue in $("#" + circle - 1) which i am not sure what you are trying to deduct 1 from but I guess your id is a number which will fail with NAN during the calculation "#" + circle - 1 so change it to "#" + (circle - 1) and try:

$("#" + (circle - 1)).animate({ //<- here use () to seperate the number calculation otherwise it will be NAN.
    opacity: 0,
    "margin-top": "50",
    height: '150px',
    width: '150px'
 }, 1000, function() {

    $("#" + circle).animate({
        opacity: 1,
        "margin-top": "50",
        height: '150px',
        width: '150px'
    }, 1000);
 });

edited Jun 19, 2013 at 18:50

answered Jun 19, 2013 at 18:42

PSL

124k21 gold badges257 silver badges243 bronze badges

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

Comments

bluetoft · Accepted Answer · 2013-06-19 18:39:17Z

1

I would assume that your code is working just fine and there IS something wrong with your variables. If $('#' + circle) doesn't find anything then nothing else will happen. Here is your code working, slightly modified.

http://jsfiddle.net/qbtDj/1/

$("#mydiv").animate({
  opacity: 0,
  "margin-top": "50",
  height: '150px',
  width: '150px'
 }, 1000, function() {
  $("#mydiv" ).animate({
  opacity: 1,
  "margin-top": "50",
  height: '150px',
  width: '150px'
 }, 1000);
 });

answered Jun 19, 2013 at 18:39

bluetoft

5,4432 gold badges25 silver badges27 bronze badges

Comments

Balint Bako · Accepted Answer · 2013-06-19 18:50:42Z

1

For me 1 is not a valid ID, use item1 and item2 too for instance. Like this (http://jsfiddle.net/balintbako/XSGN8/):

var circle = 2;
$("#item" + (circle - 1)).animate({
    opacity: 0,
    "margin-top": "50",
    height: '150px',
    width: '150px'
}, 1000, function () {
    $("#item" + circle).animate({
        opacity: 1,
        "margin-top": "50",
        height: '150px',
        width: '150px'
    }, 1000);
});

edited Jun 19, 2013 at 18:50

answered Jun 19, 2013 at 18:39

Balint Bako

2,5701 gold badge16 silver badges14 bronze badges

3 Comments

PSL Over a year ago

using number as id is valid with new html specs. Also btw this was my answer before your edit itself. :)

Balint Bako Over a year ago

I wont't edit this time, because this fiddle is really working with all the counting and that:) And it was not working in IE10 with id="1"...

Noah Over a year ago

Don't worry, guys! I fixed it! Thanks, and goodbye numerical ID's!

Collectives™ on Stack Overflow

jQuery Animate Callback not Working

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related