jquery enables the mouse to slide to the current picture highlighting and other images are grayed out _jquery

This article illustrates how jquery implements the mouse slide to the current picture highlighting and other images dimmed. Share to everyone for your reference. Specifically as follows:

Mouse slide to the current picture highlighted, other pictures dimmed this web page special effects some shopping malls often used, such as Taobao, when the user mouse moved to a certain picture time to brighten the surrounding picture dimmed, forming a contrast to increase user experience
The principle of this jquery effect is that the mouse slides over the current element, finds his sibling I, and adds the OPACITY_BG class to it, moves the mouse out of the current element, to his sibling I, and removes it plus the OPACITY_BG class scene.

The core JS code is as follows:

$ (document). Ready (function () {
 $ ("ul Li"). Hover (function () { 
  $ (this). Siblings (). Find ("I"). AddClass (" Opacity_bg ");
  The mouse slides past the current element, finds his sibling I, and adds OPACITY_BG class
 },function () {  
  $ (this) to it. Siblings (). Find ("I"). Removeclass ("Opacity_ BG ");
  Mouse out of the current element, to his sibling element I, and remove it plus the OPACITY_BG Class View
 })
}

The effect is as shown in the following illustration:

The code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

I hope this article will help you with your jquery programming.