CODEWITHSUNDEEP
jquery
user3051442
user3051442

Reputation: 149

Understanding toggle in hover

I found this code snippet that allowed me to fadeTo a certain value depending on whether the ID in question was being hovered over or not. However I am having trouble understanding part of the code snippet in question and would like clarification please.

This is the code snippet:

$(document).ready(function() {

$(document).ready(function () {
    $("#food-roulette").hover(function () {   
        this.toggle = !this.toggle;      
        $("#food-roulette").stop().fadeTo(100, this.toggle ? 0.4 : 1);
    });
});   
});

I have two questions.

1)What is toggle? Is this a boolean variable in the JQuery library? How is it intended to be used.

2) this.toggle = !this.toggle. This line is confusing the hell out of me. Under my assumption, toggle is initially true, and as soon as I hover over the button, toggle is set to false, so by the ternary operation the button opacity should be 1, but it is instead 0.4. So in a sense it's working in reverse. If i put the this.toggle = !this.toggle line after the $("#food-roulette").stop().fadeTo(100, this.toggle ? 0.4 : 1);, then it works in reverse where the button is faded until i hover over it.

So can someone explain to me the logic in those lines and why it works the way it does. Greatly appreciated.

Upvotes: 0

Views: 44

Answers (1)

WizPip
WizPip

Reputation: 378

this.toggle is an undefined variable in the context of this. As soon as this.toggle = !this.toggle is called, it's basically saying: undefined = !undefined, which results in true. The first time this hover is called, it'd therefore fade to 0.4

You can check this yourself by opening the Chrome developer tools (f12), viewing the console, and then at the > prompt type in this.toggle - you'll see undefined. After typing this.toggle = !this.toggle you'll see true.

enter image description here

Upvotes: 1

Related Questions