CODEWITHSUNDEEP
javascriptjqueryfunction
Digital Brent
Digital Brent

Reputation: 1285

jQuery -Function not getting called correctly

Okay this problem is pretty straight forward. I'm trying to call a this tele_in function that I have but I can't get it to run. I'm not sure what the heck I have to do. I dropped an alert in the area where I tried calling the function and it worked... What am I missing? Here is the code: The function I'm trying to call is right at the top there called "tele_in". The place I'm trying to call it has been commented out down towards the bottom. What am I doing wrong here?

Var SpriteVis;

jQuery(document).ready(function tele_in($) {   // function to make sprite appear.
    $("#sprite").animate({bottom: '0px'}, 400, 'linear', function () {
        $("#sprite").css({
           'background-image': 'url(/images/Warp-Sprite.png)',
           'height': '50px',
           'width': '90px',
           'left': '300px',
           'bottom': '80px'
        });
        setTimeout(function () {
            $("#sprite").css({
            'background-image': 'url(/images/test-sprite.png)',
           'height': '120px',
           'width': '96px'
            });
        }, 80);
    });
    SpriteVis = true;
});


jQuery(function ($) {
    $(window).scroll(function () {
        if (SpriteVis == true) {  //if Sprite is present on screen, run the animation sequence to make it disappear.
            $("#sprite").css({
               'background-image': 'url(/images/Warp-Sprite.png)',
               'height': '50px',
               'width': '90px',
               'left': '300px',
               'bottom': '80px'
            });
            setTimeout(function () {
                $("#sprite").css({
               'background-image': 'url(/images/Teleport-Sprite.png)',
               'height': '188px',
               'width': '52px',
               'left': '330px'
                });
                $("#sprite").animate({bottom: '2000px'}, 400, 'linear', function () {
                });
            }), 80;
            SpriteVis = false;
        } else {

            //I need to call the "tele_in" function here .

        }
    });
});

Upvotes: 0

Views: 45

Answers (3)

user488187
user488187

Reputation:

Since nothing is going to happen until tele_in is defined at document ready, just combine everything:

Var SpriteVis;

jQuery(document).ready(
  function tele_in() {   // function to make sprite appear.
    $("#sprite").animate({bottom: '0px'}, 400, 'linear', function () {
      $("#sprite").css({
       'background-image': 'url(/images/Warp-Sprite.png)',
       'height': '50px',
       'width': '90px',
       'left': '300px',
       'bottom': '80px'
      });
      setTimeout(function () {
        $("#sprite").css({
        'background-image': 'url(/images/test-sprite.png)',
       'height': '120px',
       'width': '96px'
        });
      }, 80);
    });
    SpriteVis = true;

    $(window).scroll(function () {
      if (SpriteVis == true) {  //if Sprite is present on screen, run the animation sequence to make it disappear.
       $("#sprite").css({
         'background-image': 'url(/images/Warp-Sprite.png)',
         'height': '50px',
         'width': '90px',
         'left': '300px',
         'bottom': '80px'
        });
        setTimeout(function () {
          $("#sprite").css({
           'background-image': 'url(/images/Teleport-Sprite.png)',
           'height': '188px',
           'width': '52px',
           'left': '330px'
            });
          $("#sprite").animate({bottom: '2000px'}, 400, 'linear', function () {
        });
      }), 80;
      SpriteVis = false;
    } else {
      tele_in();
    }
  });
});

Upvotes: 0

collapsar
collapsar

Reputation: 17238

You have to declare the function outside the jquery ready handler:

function tele_in () {
    // ...
}

jQuery(document).ready(tele_in);

$ is available in the global scope and needn't be passed as an argument to tele_in (unless you use multiple jquery objects, i have no experience with that scenario, not even whether it's viable).

Upvotes: 0

Pointy
Pointy

Reputation: 413727

You'll have to pull that function declaration out of the jQuery call:

function tele_in($) {   // function to make sprite appear.
    $("#sprite").animate({bottom: '0px'}, 400, 'linear', function () {
        $("#sprite").css({
           'background-image': 'url(/images/Warp-Sprite.png)',
           'height': '50px',
           'width': '90px',
           'left': '300px',
           'bottom': '80px'
        });
        setTimeout(function () {
            $("#sprite").css({
            'background-image': 'url(/images/test-sprite.png)',
           'height': '120px',
           'width': '96px'
            });
        }, 80);
    });
    SpriteVis = true;
});

Query(document).ready(tele_in);

A function created with a function instantiation expression (as in your case) does not have its name exported to the local scope. The name is only visible from inside the function.

By moving that to a function declaration statement, you create a symbol in the containing scope that is visible throughout.

Note that because of the way you've defined that function, you'll have to call it like this:

    tele_in($);

or else the value of $ in the function will be undefined.

Upvotes: 3

Related Questions