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. POJ 3189 二分+Dinic

    题意: 思路: 二分跨度 枚举最低座次 建图:源点向每头牛连边权为1的边 每头牛向当前枚举的B的区间这段连上边权为1的边 所有座次向汇点连边权为牛棚容量的边 判判流量是不是等于n 一开始写得是直接枚举 ...

  2. Django_shell命令操作

  3. 使用python创建cocos2d-x项目

    已准备条件: 已安装vs2012,已下载cocos2d-x sdk 2.2.3包. 旧版本号使用包里面的模板创建项目,如今新的包,使用python  来创建 1.下载安装  python  https ...

  4. Oracle-02-数据库概述

    一.数据库用途 用于存放数据的软件 当中Application server重要,将数据存在表中每一个表关系就能够反映不同表之间数据的关系,比方淘宝用户注冊.商品买卖等数据存在操作系统的目录中,不便于 ...

  5. jQuery Easy UI ProgressBar（进度条）组件

    ProgressBar(进度条)组件,这个还是挺好玩的.我们在自己做点什么的时候常常能用到,比方上传下载文件.导入导出文档啊.加载网页等等. 应用场景非常多,使用起来还非常easy. 演示样例: &l ...

  6. SQL Server performance for alter table alter column change data type

    最近在搞一个升级脚本,发现有一张业务表中的某些字段长度需要调整,直接使用alter table alter column进行修改发现修改一列要用十几分钟!!!两三个列那用时简直不能容忍啊!google ...

  7. POJ 2039 Floyd

    句意理解题 解释输入好啦: 第一行n个数 m场电影 随后m行 每行的第一个数 代表 有k奶牛在这个电影中出现过 随后k个数 是奶牛的编号 如果两头奶牛在同一个电影中出现过 相互度为1 奶牛们的相互度可 ...

  8. #学习笔记#——JavaScript 数组部分编程（三）

    3.在数组 arr 末尾添加元素 item.不要直接修改数组 arr,结果返回新的数组 主要考察数组的concat方法,代码如下: arr.concat(item); concat 方法不修改原数组. ...

  9. Block Manager

    在Spark中,将数据抽象为Block(不论是shuffle数据,还是节点本身存储的数据),而每个driver/executor中的block都是由`BlockManager`这个类来负责管理的.对于 ...

  10. 什么是事件委托？jquery和js怎么去实现？

    事件委托又叫事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. js: window.onload = function(){ var oul = docume ...