understanding crossfading effect

HI there, I wonder if anybody could help me to understand correctly the jquery code for crossfading effects, quite a neat effect actually [url]http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/[/url]
I had some trouble understanding the css but I was kindly helped [url]https://webdeveloper.com/forum/showthread.php?p=1192483&posted=1#post1192483[/url] so that’s sorted.
Back to the javascript.
Couple of things in this code that are a bit new and somewhat odd to me:

[CODE]
function cycleImages(){
var $active = $(‘#portfolio_cycler .active’);
var $next = ($(‘#portfolio_cycler .active’).next().length > 0) ? $(‘#portfolio_cycler .active’).next() : $(‘#portfolio_cycler img:first’);
$next.css(‘z-index’,2);//move the next image up the pile
$active.fadeOut(1500,function(){//fade out the top image
$active.css(‘z-index’,1).show().removeClass(‘active’);//reset the z-index and unhide the image
$next.css(‘z-index’,3).addClass(‘active’);//make the next image the top one
});
}

$(document).ready(function(){
// run every 7s
setInterval(‘cycleImages()’, 7000);
})
[/CODE]

I need to say I am at the beginning of my jquery learning sessions, so sorry if I ask obvious questions.
Take this line:

[CODE]var $active = $(‘#portfolio_cycler .active’);[/CODE]

1)First and foremost, why there is a $ before the name of the variable? I thought that a variable is declared and assigned a value in this fashion

[CODE]var var_name = …[/CODE]

. Is

[CODE]var $var_name = …[/CODE]

the same?
2)Then still the first line, this bit

[CODE]$(‘#portfolio_cycler .active’)[/CODE]

I haven’t come across this syntax before. Is this selector selecting a div with an id of portfolio_cycler but what’s that class active doing there?! Does it mean that we are selcting only portfolio_cycler with a class of active? SOrry I am a bit confused by that.
Moving on this line:

[CODE]var $next = ($(‘#portfolio_cycler .active’).next().length > 0) ? $(‘#portfolio_cycler .active’).next() : $(‘#portfolio_cycler img:first’);[/CODE]

. IS this to say that if the next element in the portfolio_cycler is bigger than zero – meaning it is not the first image – then the variable next is equal to the next image otherwise it is the first image

Next one:

[CODE]$active.css(‘z-index’,1).show().removeClass(‘active’);[/CODE]

WHy are we using the method show() in here why do we want to make the precedent image visible is it has been replace by the following one?

Hope somebody can give me a hand, thanks

Also in #JavaScript _↴