Menu
I came across this post on this site with a jFiddle showing a following menu for JQUery, well I saw this piece of syntax I can't figure out.
JFiddle: http://jsbin.com/oxajeq/3/edit?html,css,js,console,output
Line of code I do NOT understand
$('#mini-logo')[logoSH](300);
I know the first part selects the element with id of mini-logo, but I have no idea what the rest of the syntax is! in the code, [logoSH] can become show or hide, while the () at the end means the duration. However, I can't find any example of anything using this syntax. I also googled for CSS3, JQUery, transitions, effects, animations, anything of what this might be and no luck. I find stuff that are methods, and others that are not methods but take parameters, but nothing like this code. I know that what ever is inside [] is not a method, but I can't figure out what they are. thanks in advance for any help.
250
In jQuery, the $ sign is just an alias to jQuery() , then an alias for a function. This page reports: Basic syntax is: $(selector).action() A dollar sign to define jQuery. A (selector) to "query (or find)" HTML elements.
The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
$ is simply a valid JavaScript identifier. JavaScript allows upper and lower letters, numbers, and $ and _ . The $ was intended to be used for machine-generated variables (such as $0001 ). Prototype, jQuery, and most javascript libraries use the $ as the primary base object (or function).
Usually when you encounter $() , that means the developer is using a javascript library, such as jQuery. The $ symbol is the namespace for those libraries.
This construct is based on the bracket notation to access properties. It allows here a dynamic selection of the method to apply (show or hide).
logoSH is either "show" or "hide".
Which means your line is either
$('#mini-logo')["show"](300); or $('#mini-logo')["hide"](300);
which you can also read as
$('#mini-logo').show(300); or $('#mini-logo').hide(300);
This is a common construct, that you may also find with a ternary operator:
$('#mini-logo')[someBool ? "show" : "hide"](300);
Note: were there not the duration, you could have use the toggle function which takes a boolean as argument.
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
