$(document).ready(function(){ $(“.thumbs img”).fadeTo(“slow”, 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads $(“.thumbs img”).hover(function(){ $(this).fadeTo(“slow”, 1.0); // This should set the opacity to 100% on hover },function(){ $(this).fadeTo(“slow”, 0.6); // This should set the opacity back to 60% on mouseout }); });
Category: jQuery
Check if an element contains certain class
Another awesome feature of jQuery 1.4 that will be quite handy is the has method. This method will find if a an element contains a certain other element class or whatever it is you are looking for and do anything you want to them. view plaincopy to clipboardprint? $(“input”).has(“.email”).addClass(“email_icon”); In the above code we will […]
Traversing the DOM
This idea of traversing through object nodes is deep enough to be an article within itself. But for any intermediate or advance jQuery developers who understand this topic, I’m sure these quick snippets will help in future problem solving. The goal is often to pull data from another element related to the currently active element(clicked, […]
Retrieve Content Values
Instead of appending new HTML content into the document you may also pull out the current HTML content from any area in your webpage. This can be an entire list item block, or the contents of a paragraph tag. Also the .val() property is used on input fields and form elements where you cannot get […]
Latest Version
Let’s say you want to have a suckerfish dropdown, or maybe you just want to add a cool hover on a div, well in some browsers thats not allowed to be done with pure css, hence use this simple technique and you will have cross browser hover with any two class you want. <script src=”http://code.jquery.com/jquery-latest.js”></script> […]
On Hover add and Remove a class
Let’s say you want to have a suckerfish dropdown, or maybe you just want to add a cool hover on a div, well in some browsers thats not allowed to be done with pure css, hence use this simple technique and you will have cross browser hover with any two class you want. $(‘.onhover’).hover( function(){ […]
Keystroke Events
Dealing with user input is another grey area I have come across. The jQuery keydown and keyup event listeners are perfect for dealing with such experiences. Both of these methods are called at very different times during the keystroke event. So make sure you have the application planned out before deciding which one to use. […]
Toggle Visibility
Fading objects out of the document is very common with modern user interfaces. You can always have small popup boxes or notifications which need to display and then hide after a few seconds. Using the fadeToggle function you can quickly hide and display any objects in your DOM. Keep this code handy if you will […]
Toggle CSS Classes
Adding and removing CSS classes on HTML elements is another fairly common action. This is one technique you may consider with selected menu items, highlighted rows, or active input elements. This newer method is simply quicker than using .addClass() and .removeClass() where you can put all the code into one function call. $(‘nav a’).toggleClass(‘selected’);
Prevent Anchor Links from Loading
When you create JavaScript applications there are plenty of times where you need a link or button to just do nothing. This is often for triggering some type of dynamic effect, such as a hidden menu or Ajax call. By using the event object during any click, we can manipulate the data sent back to […]