Flipboard Next slide - why no $?


#1

Why is the correct code for lesson 4:

currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');

Instead of:

$('currentSlide')....
$('nextSlide')...

Is it because currentSlide and nextSlide are variables that I created in the jQuery program, instead of from the CSS?


#2

Hi Emac,

You can't select currentSlide or nextSlide like that. Those selectors would be trying to select the (nonexistent) HTML <currentSlide> and <nextSlide> tags. So to do it the way you want, you would have to do this:

$('.current-slide').fadeOut(600).removeClass("active-slide");
$('.current-slide').next().fadeOut(600).removeClass("active-slide");

...which is actually longer than using our variables:

currentSlide.fadeOut(600).removeClass("active-slide");
nextSlide.fadeIn(600).addClass("active-slide");

The variables (especially the nextSlide one) allow us to keep selectors and logic (next()) from being repeated, which makes for faster and easier to understand code :slightly_smiling:


#3

So that all boils down to, yes, my theory was correct (mostly), right?


#4

@emac75 No, not really.

You can't really create variables like that in CSS. And CSS variables are only a fairly recent addition to browsers, they're meant for storing stuff like colors and breakpoints, not selectors and stuff like that.