今天学到JQuery中的遍历-siblings，便手痒做了个手风琴的动态效果，有一点收获，分享给大家。mouseout的时候一定要记得opacity必须设置，不然li的opacity会保持mousemove时的状态。代码有不足的地方欢迎大家踊跃的提意见。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>siblings遍历</title>

        <style type="text/css">

            ul{

                overflow: hidden;

            }

            ul li{

                text-align: center;

                list-style: none;

                float: left;

                width: 50px;

                height: 100px;

                margin: 10px auto;

                background: #444444;

                border: 0.5px solid #ffffff;

            }

        </style>

        <script type="text/javascript" src="../vendor/jquery-1.11.3.min.js"></script>//引入jQuery

    </head>

    <body>

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

            <li>6</li>

            <li>7</li>

            <li>8</li>

            <li>9</li>

            <li>10</li>

        </ul>

        <script type="text/javascript">

            $("ul li").mouseover(function(){

                $(this).animate({

                    opacity:"0.8",

                    width:"55px",

                    height:"110px"})

                .siblings().css({

                    opacity:"0.4",

                    width:"45px",

                    height:"90px"});

            });

            $("ul").mouseout(function(){

                $("ul li").css({

                    background:"#444444",

                    width: "50px",

                    height: "100px",

                    opacity:"1",//一定要记得透明度也得设置，如若不设置，透明度会保持你在mousemove的时候的状态

                })

            });

        </script>

    </body>

</html>

jQuery做出手风琴效果的更多相关文章

  1. 基于jquery横向手风琴效果

    基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash&quo ...

  2. jquery横向手风琴效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jquery 图片手风琴效果

    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

  4. jquery横向手风琴效果2

    <!doctype html> <html> <head> <meta charset="utf-8"> <script ty ...

  5. jquery实现手风琴效果

    html----accordion.html <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. jquery版手风琴效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. jQuery实现手机竖直手风琴效果

    效果:http://hovertree.com/texiao/jquery/65/ 效果图: 手机扫描二维码查看效果: 代码: <!doctype html> <html lang= ...

  8. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

  9. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

随机推荐

  1. 【python】-- try except (异常捕获)、断言

    try except (异常捕获) 当程序出错了,但是我们又不想让用户看到这个错误,而且我在写程序的时候已经预料到了它可以出现这样的错误,出现这样的错误代表着什么,我们可以提前捕获这些个错误 1.异常 ...

  2. Symfony 没有找到数据库驱动An exception occured in driver: could not find driver

    如果一直报这个错误, 第一,你本地没有相关的数据库驱动(mysql:-->pdo_myql,postgresql-->pdo_pgsql等); 需要执行 php -m|grep -i pd ...

  3. C++学习笔记30，指针的引用（2）

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/guang_jing/article/details/32910093 能够创建不论什么类型的引用,包 ...

  4. [转载]设计模式的UML图

    1.抽象工厂(Abstract Factory)模式 意图:为特定的客户(或情况)提供特定系列的对象. 2.类的适配器(Adapter)模式 意图:将一个类的接口转换成客户希望的另外一个接口. 3.对 ...

  5. Springmvc注解启用

      http://www.blogbus.com/wanping-logs/235898637.html 使用注解的原因 最方便的还是启用注解 注解方便,而且项目中很流行. 配置文件尽量减少,主要使用 ...

  6. HTML哪些是块级元素，哪些是行内元素、

    块级元素:块级大多为结构性标记 <address>...</adderss> <center>...</center>  地址文字 <h1> ...

  7. HackerRank - camelcase 【字符串】

    思路 找单词 第一个 单词 是小写 然后 后面的单词 第一位 都是大写 刚开始 初始化 ans = 1 然后 往后遍历 碰到 大写的 更新答案 AC代码 #include <cstdio> ...

  8. js 动态加载事件的几种方法总结

    本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助   有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添 ...

  9. 利用etcd及confd实现配置自动管理

    ETCD etcd 架设etcd集群 静态启动etcd集群需要每个成员在集群中知道另一个成员.在许多情况下,集群成员的IP可能提前未知.在这种情况下,可以使用etcd集群的自动发现服务.一旦etcd集 ...

  10. EntityFramework 学习 一 实体类型

    我们为已存在的数据库创建EDM,EDM包含与数据库中表对应的实体.EF中有两种实体类型 POCO entity dynamic proxy entity POCO Entity (Plain Old ...