Menu
In Jquery how would i make it so that if i had a div, with different elements inside of it, a select, a search input, etc, that when i click outside of the div, on the page, the div fades out, but i can click on the select and type in the search input and not have it fade? any help is appreciated. -nick
397
jQuery fadeOut() SyntaxfadeOut( speed, callback_function); selector: It is used to select the html element on which this fade out effect is being applied. speed: The speed of the fadeout effect in milliseconds. It is an optional parameter and can take values such as “slow” or “fast” or in milliseconds.
To hide an element when clicked outside: Add a click event listener to the document object. On each click, check if the clicked element is outside of the specific element using the contains() method. If the clicked element is outside, hide the original element.
The jQuery fadeOut() method is used to fade out a visible element. Syntax: $(selector).fadeOut(speed,callback); The optional speed parameter specifies the duration of the effect.
fadeIn() function fades in our first image in 1500 milliseconds (or, 1.5 seconds). The . delay() function acts as a counter and waits 3500 milliseconds (or, 3.5 seconds), then the . fadeOut() function fades it out in 1500 milliseconds (or, 1.5 seconds).
Code Duck's answer is incomplete, because you'd need to have it not fade out if you click the DIV itself (only outside). So say your DIV that's supposed to fade out has an ID of "menu".
jQuery("#menu").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); });
The use of one is more concise than the bind/unbind. Also namespaced events aren't really needed here if you use one because there's no need to explicitly unbind a particular click handler on document.
The return false is just saying "stop bubbling this event up to the document."
146
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
