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. HDU 4372 Count the Buildings

    Count the Buildings Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Othe ...

  2. C++入门之HelloWorld

    1.在VS2017上新建一个C++空白项目,命名为hello 2.在资源文件下新建添加新建项main.cpp 3.在main.cpp中编写hello world输出代码 #include<std ...

  3. express随笔

    Express 是node 第三方框架,框架的意义就在于能大大简化程序地开发.看一下Express是怎么简化node程序开发的. 1,用Express写一个hello world 程序,我们来体验一下 ...

  4. mysql 中sql 语句查询今天、昨天、近7天、近30天、一个月内、上一月数据

    ·1.几个小时内的数据 DATE_SUB(NOW(), INTERVAL 5 HOUR) 1 ·2.今天 select * from 表名 where to_days(时间字段名) = to_days ...

  5. 解决MyEclipse中安装或升级ADT之后SDK Target无法显示的问题

        故障现象,在MyEclipse里面安装完最新的android sdk和ADT之后,无法新建项目,Build Target为空,显示一直在loading.即如下面图里面显示的,Target Na ...

  6. android对话框显示异常报错：You need to use a Theme.AppCompat theme (or descendant) with this activity.

    今天写android实验碰到到一个问题,在用AlertDialog.Builder类构建一个对话框之后,调用Builder.show()方法时抛出异常如下: - ::-/xyz.qlrr.sqlite ...

  7. ShopNC【B2B2C】多用户电商平台系统,带WAP,微商城,圈子,门户

    <ShopNC[B2B2C]多用户电商平台系统,带WAP,微商城,圈子,门户> 早上发了套ShopNC B2B2C多用户商城2014商业版,带微商城,但不带圈子.WAP.圈子和门户,如今发 ...

  8. [Python] Manage Dependencies with Python Virtual Environments

    Virtual Environments ensure that dependencies from one Python application don’t overwrite the depend ...

  9. 一种基于RGB空间的对照度增强的filter

    今天看前辈博客的时候看到一种新的基于RGB颜色空间的image contrast enhance filter 流浪的鱼link: http://blog.csdn.net/jia20003/arti ...

  10. Unity3D:粒子系统Particle System

    1. GameObject → Create Other  →  Particle System. 2. 选中 Particle System,可看到下列屬性: 3.Particle System: ...