jQuery实战_360导航效果（节点操作练习）

模仿360导航栏，我们要做的效果：

鼠标移上去的时候，会显示出一个”百度一下，你就知道”的提示框。
可以直接写在原html中，为了练习jQuery的节点操作，我们动态生成。

HTML结构：

<div class="one">
       <ul>
           <li><a href="#"><img src="./images/01.JPG" alt=""></a></li>
           <li><a href="#"><img src="./images/02.JPG" alt=""></a></li>
           <li><a href="#"><img src="./images/03.JPG" alt=""></a></li>
           <li><a href="#"><img src="./images/04.JPG" alt=""></a></li>
           <li><a href="#"><img src="./images/05.JPG" alt=""></a></li>
           <li><a href="#"><img src="./images/06.JPG" alt=""></a></li>
           <li><a href="#"><img src="./images/07.JPG" alt=""></a></li>
           <li><a href="#"><img src="./images/08.JPG" alt=""></a></li>
       </ul>
   </div>

JS：

$(".one li")
            .append('<div></div><p>百度一下，你就知道</p>')
            .children('div')
            .fadeTo(100, 0.5)
            .next()
            .each(function (index, ele) {
                $(this).css({
                    "background-position": '1px -' + ( (index - 1) * 25 - 2) + 'px'
                })
            })
            .parent()
            .mouseenter(function(){
                $(this).children('div,p').stop().animate({
                    'bottom': 5
                });
            })
            .mouseleave(function(){
                $(this).children('div,p').stop().animate({
                    'bottom': -28
                })
            })

效果图：

移上去的时候：


注意点：
  在使用链式链接后，当用了children(‘div’)，那么后面的操作都是对div操作，如果想回到对父元素的操作，必须用parent()，回到对父元素操作事件