CODEWITHSUNDEEP
javascriptjquery
Noah
Noah

Reputation: 124

jQuery Animate Callback not Working

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);
 });

Upvotes: 0

Views: 125

Answers (3)

Balint Bako
Balint Bako

Reputation: 2560

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);
});

Upvotes: 1

PSL
PSL

Reputation: 123739

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);
 });

Upvotes: 1

bluetoft
bluetoft

Reputation: 5443

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);
 });

Upvotes: 1

Related Questions