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. Gym - 100338C Important Roads 最短路+tarjan

    题意:给你一幅图,问有多少条路径使得去掉该条路后最短路发生变化. 思路:先起始两点求两遍单源最短路,利用s[u] + t[v] + G[u][v] = dis 找出所有最短路径,构造新图.在新图中找到 ...

  2. IPv4私有IP地址有哪些！

    私有IP地址是一段保留的IP地址.只是使用在局域网中,在Internet上是不使用的. 私有IP地址的范围有: 私网地址分有三类, A类中,第一段为10的都为私网地址,B类中,以172.16--172 ...

  3. 【Linux端口大全】

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

  4. javaWeb自己定义可排序过滤器注解,解决Servlet3.0下@WebFilter注解无法排序问题

    com.lwl.anno 凝视类型 @WebFilterSort 须要用的jar包 http://download.csdn.net/detail/u013202238/9431110 用该注解注冊的 ...

  5. Android 简述touch事件中的MotionEvent

    有关touchEvent的事件里都有一个 MotionEvent 參数,以下来简介一下它的属性的一些含义和使用的方法 通常单指操作时,一般例如以下: switch (event.getAction() ...

  6. POJ2823 Sliding Window【双端队列】

    求连续的k个中最大最小值,k是滑动的,每次滑动一个 用双端队列维护可能的答案值 假设要求最小值,则维护一个单调递增的序列 对一開始的前k个,新增加的假设比队尾的小.则弹出队尾的,直到新增加的比队尾大. ...

  7. [BZOJ3526][Poi2014]Card 线段树

    链接 题意:有一些卡牌,正反各有一个数,你可以任意翻转,每次操作会将两张卡牌的位置调换,你需要在每次操作后回答以现在的卡牌顺序能否通过反转形成一个单调不降的序列 题解 线段树上维护 \(f[o][0/ ...

  8. 在gridview里查找模板里的button控件

    这个问题,真是搞了我1天,这次记住他 第一种方法: protected void GridView1_RowCommand(object sender, GridViewCommandEventArg ...

  9. grunt yoman bower的理解

    grunt : 前端构建工具 1 什么事前端构建工具 目前前端已经开始了工程化 比如 一个项目 里面用到了几十个js文件 几十个css 很多图片资源 我们如果引入 还是按照以前的方式 out 因此这个 ...

  10. jQuery插件--根据数据加载的进度动画案例

    css: *{ margin:; padding:; } @media screen and (min-width:320px){ html{font-size:12px;}} @media scre ...