javascript function vs jquery namespace function, the difference?

Question

How come a javascript function like this below...

function stars() {
var mOpacity = $('#area').css('opacity');
if (mOpacity = 1) {

$('#title').find('.stars').animate({"marginTop":"-170px",opacity:1}, 3000)
.animate({opacity: 0}, 400)
.animate({"marginTop":"60px",opacity:0},0, stars);
  }
}
stars();

...breaks my browser when I try to do something like this....

$.stars = function() {
var mOpacity = $('#area').css('opacity');
if (mOpacity = 1) {

$('#title').find('.stars').animate({"marginTop":"-170px",opacity:1}, 3000)
.animate({opacity: 0}, 400)
.animate({"marginTop":"60px",opacity:0},0, $.stars());
  }
}
$.stars();

What is the lesson here between the 2 styles of functions?

Thanks

Ok based on everyones feedback to see more code, here is a full gimplse of the code on my .js file...

function mIntro() {

/********PRE-GAME ANIMATION*********/
$('#area').css({'opacity':0}).delay(1000).animate({opacity:1},300);
$('#title').find('.age').css({'opacity':0}).delay(2000).animate({opacity:1}, 3000);

function stars() {
var mOpacity = $('#area').css('opacity');
if (mOpacity = 1) {

$('#title').find('.stars').animate({"marginTop":"-170px",opacity:1}, 3000)
.animate({opacity: 0}, 400)
.animate({"marginTop":"60px",opacity:0},0, stars);
  } 
}
stars();
}

$(function() {
  mIntro();
});

I have jquery connected to this .js page and I just can't understand why stars has to be in-cased in a traditional javascript function and not flexibile for a jquery namespace function. I bet it has something to do with the animate tag that re-calls stars, but I am not sure...

Thanks or any advice!!!

Neither should break... but if you want to "namespace" jQuery like you do in the second example, you should use $.fn.stars. But I guess it doesn't matter — Ian
– Ian, Commented Sep 14, 2012 at 16:36
@AndrewWhitaker Definitely true, especially if the OP is using .noConflict()...but they do say they are using jQuery at least... — Ian
– Ian, Commented Sep 14, 2012 at 16:37

pimvdb · Accepted Answer · 2012-09-14 16:37:53Z

3

You're inadvertently calling it in the second snippet:

.animate(..., $.stars());

You should code it the same way: pass the function, not the result of calling it:

Function:             stars      $.stars
Result of calling:    stars()    $.stars()

answered Sep 14, 2012 at 16:37

pimvdb

155k80 gold badges313 silver badges358 bronze badges

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

3 Comments

klewis Over a year ago

what do you mean? I am using $.stars = function(), with the $.stars() function name I passed in the animation script in my demo above...If this is the issue, please explain to me how to see my mistake...

pimvdb Over a year ago

@blachawk: As you can see, you passed stars rather than stars() in the first snippet. The same goes for $.starts instead of $.starts() - that's your mistake.

klewis Over a year ago

thank you for helping me understand - I learned something new today :)

Mike M · Accepted Answer · 2012-09-14 16:40:00Z

0

The difference is that your first example is contained directly within the window object whereas the second example is contained in the jQuery ($) object (note that the $ object is then contained within the window object). As far as why it breaks when you attempt to use the jQuery namespace, I cant say without seeing all of your code, however $ is probably not defined.

answered Sep 14, 2012 at 16:40

Mike M

2123 silver badges11 bronze badges

Collectives™ on Stack Overflow

javascript function vs jquery namespace function, the difference?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related