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. 初识activiti

    Activity工作流学习要点 1. 1个插件 在Eclipse中安装Activity插件,让你可以在Eclipse中绘制Activity工作流图 2. 1个引擎 ProcessEngine对象,Ac ...

  2. POJ 3629 队列模拟

    听说STL会卡T 然后我就试了一发 哈哈哈哈哈哈哈哈哈哈 1000ms卡时过的 这很值得我写一发题解了 哈哈哈哈哈哈哈哈哈哈哈哈 //By SiriusRen #include <queue&g ...

  3. JWT Authentication Tutorial: An example using Spring Boot--转

    原文地址:http://www.svlada.com/jwt-token-authentication-with-spring-boot/ Table of contents: Introductio ...

  4. Android使用token维持登陆状态的方法

    什么是token token(令牌)是一串唯一的字符串,通常由服务端生成,在注册完成时返回给客户端,用来标识此用户,客户端将此字符串存储在本地.在以后的网络请求时,客户端先查询本地的token,如果有 ...

  5. mvc下是如何传值的

    最近在开发一个项目,用的是mvc框架,现将mvc会用到的常用传值方法总结如下: 在讲传递参数方法之前,先简单介绍一下MVC路由及运行机制.     首先,Web 浏览器向服务器发送一条URL 请求,如 ...

  6. 03012_预处理对象executeQuery方法（实现数据库的查询）

    1.概述 (1)通过预处理对象的executeQuery方法,完成记录的select语句的执行: (2)操作格式统一如下: ①注册驱动: ②获取连接: ③获取预处理对象: ④SQL语句占位符设置实际参 ...

  7. Add Webhooks to Your API the Right Way

    Add Webhooks to Your API the Right Way Adam DuVander / December 15, 2016 In the last 10 years, APIs ...

  8. JavaLearning:日期操作类

    package org.fun.classdemo; import java.util.Calendar; import java.util.GregorianCalendar; public cla ...

  9. poi excel自己主动转换成javabean 支持引用类型属性二级转换

    近期项目须要使用excel导入功能.导入学生的时候须要指定所在班级,使用excel一次性导入! 将曾经的代码改改支持属性内引用类的转换. 測试对象为User对象,javabean结构: private ...

  10. server环境信息【C#代码获取】

    server环境信息[C#代码获取] public class ServicesMessage { [DllImport("kernel32", CharSet = CharSet ...