bootstrap课程7 jquery中结束之前动画用什么

一、总结

一句话总结：stop()方法。$('.navs').not($('.navs').eq(idx)).stop().hide(100);

1、bootstrap导航效果移入对应li，这个li没有加active类，如何实现让它加上？

自己加上js即可

63 $('li').mouseenter(function(){

64     $(this).addClass('active');

65     $('li').not($(this)).removeClass('active');

66

67     idx=$(this).index('li');

68     $('.navs').eq(idx).stop().show(1000);

69     $('.navs').not($('.navs').eq(idx)).stop().hide(100);

70 });

二、jquery中结束之前动画用什么

1、相关知识

输入框组:
.input-group
.input-group-addon
.input-group-lg
.input-group-sm
.input-group-btn

导航:
.nav
.nav-tabs
.nav-pills
.nav-stacked

 

2、代码

胶囊式导航实现个人中心

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         .navs{

             padding:15px 15px;

             display: none;

         }

     </style>

     <link rel="stylesheet" href="bs/css/bootstrap.css">

     <script src="bs/js/jquery.min.js"></script>

     <script src="bs/js/bootstrap.js"></script>

     <script src="bs/js/holder.min.js"></script>

 </head>

 <body>

     <div class="container">

         <h1 class='page-header'>Bootstrap前端框架</h1>

         <div class="row">

             <div class="col-md-2">

                 <ul class="nav nav-pills nav-stacked">

                     <li class='active'>

                         <a href="">linux</a>

                     </li>

                     <li class=''>

                         <a href="">php</a>

                     </li>

                     <li class=''>

                         <a href="">java</a>

                     </li>

                 </ul>

             </div>

             <div class="col-md-10">

                 <div class="row navs">

                     <img src="a.jpg">

                     <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>

                 </div>

                 <div class="row navs">

                     <img src="b.jpg" alt="">

                     <p>php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!</p>

                 </div>

                 <div class="row navs">

                     <img src="c.jpg" alt="">

                     <p>java is very much!java is very much!java is very much!java is very much!java is very much!java is very much!java is very much!java is very much!java is very much!java is very much!java is very much!java is very much!java is very much!java is very much!java is very much!java is very much!java is very much!java is very much!java is very much!java is very much!java is very much!java is very much!java is very much!java is very much!</p>

                 </div>

             </div>

         </div>    

     </div>

 </body>

 <script>

 $('li').mouseenter(function(){

     $(this).addClass('active');

     $('li').not($(this)).removeClass('active');

     idx=$(this).index('li');

     $('.navs').eq(idx).stop().show(1000);

     $('.navs').not($('.navs').eq(idx)).stop().hide(100);

 });

 $('.navs').eq(0).show(10);

 </script>

 </html>
 

bootstrap课程7 jquery中结束之前动画用什么的更多相关文章

  1. jQuery中的渐变动画效果

    jQuery中的渐变动画效果jQuery中的渐变动画效果

  2. jQuery中的经典动画

    show()方法和hide()方法是jQuery中的基本动画方法,hide()方法等于将css()方法设置display属性为none.如何让元素动起来呢,我们可以在show和hide里加入slow, ...

  3. jQuery中事件与动画

    jQuery中的事件与动画   一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.windo ...

  4. jQuery 快速结束当前动画

    当需要快速结束一个当前正在执行的jquery 动画时(还没执行完成),如 fadeOut(),可以在执行当前动画的对象上执行 stop(true);方法 如: <script type=&quo ...

  5. jquery中stop停止动画笔记

    jQuery stop() 方法用于停止动画或效果,在它们完成之前. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. 语法: $(selector).stop( ...

  6. jQuery中事件与动画的总结

       1.加载DOM     1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行   $(function(){}) ……:只是 ...

  7. jQuery 中的简单动画

    制作动画常用方法: show("速度")   显示元素   hide("速度")   隐藏元素   toggle()       切换效果 例如下jQuery代 ...

  8. jquery 中fadeIn,fadeOut动画

    我们在做首页banner图片播放的时候会使用fadeIn,fadeOut动画,这里需要注意的是: fadeIn作用相当于:display:list-item;opcity逐渐变为1 fadeOut作用 ...

  9. jQuery中的综合动画

    所谓综合动画,就是在链式表达式依次执行相关animate函数,其中的参数是以键值对的方式存在的. 如下示例,就展示了一个基本的综合动画. <!DOCTYPE html PUBLIC " ...

随机推荐

  1. ASE加、解密

    AES已经变成目前对称加密中最流行算法之一:AES可以使用128.192.和256位密钥,并且用128位分组加密和解密数据. /** * 加密 * * @param content 需要加密的内容 * ...

  2. JS模式

    策略 命令 迭代器 代理 组合 发布/订阅 单例 享元 职责链 中介者 装饰者 状态 适配器 设计原则: 单一职责.最少知识.开放-封闭

  3. 网络场景图WebScene介绍

    网络场景图的创建同样需要ID,然后再放入3维的地图底图中. 1.创建一个新的网络场景图 "esri/WebScene" var scene = new WebScene({ por ...

  4. 【Linux端口大全】

    2端口:管理实用程序 3端口:压缩进程 5端口:远程作业登录 7端口:回显 9端口:丢弃 11端口:在线用户 13端口:时间 17端口:每日引用 18端口:消息发送协议 19端口:字符发生器 20端口 ...

  5. Redis 数据持久化的方案的实现

    原文:Redis 数据持久化的方案的实现 版权声明:m_nanle_xiaobudiu https://blog.csdn.net/m_nanle_xiaobudiu/article/details/ ...

  6. hdparm

    https://www.douban.com/note/244813504/ http://blog.sina.com.cn/s/blog_413d250e0101jtr7.html http://m ...

  7. 洛谷 P1460 健康的荷斯坦奶牛 Healthy Holsteins

    P1460 健康的荷斯坦奶牛 Healthy Holsteins 题目描述 农民JOHN以拥有世界上最健康的奶牛为傲.他知道每种饲料中所包含的牛所需的最低的维他命量是多少.请你帮助农夫喂养他的牛,以保 ...

  8. Template template parameter(模板參数) example

    /********************************************************************************* Copyright (C), 19 ...

  9. Java Swing设置主窗体位置居中方法

    01.第一种方法 int windowWidth = frame.getWidth(); //获得窗体宽  int windowHeight = frame.getHeight(); //获得窗体高 ...

  10. php 图片局部打马赛克

    php 图片局部打马赛克 原理: 对图片中选定区域的每一像素,添加若干宽度及高度,生成矩型.而每一像素的矩型重叠在一起.就形成了马赛克效果. 本例使用GD库的imagecolorat获取像素颜色,使用 ...