zoukankan      html  css  js  c++  java
  • bootstrap课程7 jquery中结束之前动画用什么

    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、代码

    胶囊式导航实现个人中心

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     6     <title>index</title>
     7     <style>
     8         *{
     9             font-family: 微软雅黑;
    10         }
    11         
    12         .navs{
    13             padding:15px 15px;
    14             display: none;
    15         }
    16     </style>
    17     <link rel="stylesheet" href="bs/css/bootstrap.css">
    18     <script src="bs/js/jquery.min.js"></script>
    19     <script src="bs/js/bootstrap.js"></script>
    20     <script src="bs/js/holder.min.js"></script>
    21 </head>
    22 <body>
    23     <div class="container">
    24         <h1 class='page-header'>Bootstrap前端框架</h1>
    25         <div class="row">
    26             <div class="col-md-2">
    27                 <ul class="nav nav-pills nav-stacked">
    28                     <li class='active'>
    29                         <a href="">linux</a>
    30                     </li>    
    31                     <li class=''>
    32                         <a href="">php</a>
    33                     </li>    
    34                     <li class=''>
    35                         <a href="">java</a>
    36                     </li>    
    37                 </ul>
    38             </div>
    39 
    40             <div class="col-md-10">
    41                 <div class="row navs">
    42                     <img src="a.jpg">
    43                     <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>
    44                 </div>
    45 
    46                 <div class="row navs">
    47                     <img src="b.jpg" alt="">
    48                     <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>
    49                 </div>
    50 
    51                 <div class="row navs">
    52                     <img src="c.jpg" alt="">
    53                     <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>
    54                 </div>
    55             </div>
    56         </div>    
    57         
    58 
    59         
    60     </div>
    61 </body>
    62 <script>
    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 });
    71 
    72 $('.navs').eq(0).show(10);
    73 </script>
    74 </html>
     
  • 相关阅读:
    FreeSWITCH呼叫参数之sip_cid_type
    FreeSWITCH收到重复的DTMF信号
    ajaxupload.js调用始终进入error回调
    df -h和du -sh显示结果不一样的原因及解决
    公网用户接入NAT后面的freeswitch配置
    Jedis工具类(含分布式锁的调用和释放)
    【读书笔记《Android游戏编程之从零开始》】19.游戏开发基础(游戏音乐与音效)
    【读书笔记《Android游戏编程之从零开始》】18.游戏开发基础(碰撞检测)
    【读书笔记《Android游戏编程之从零开始》】17.游戏开发基础(游戏适屏的简述和作用、让游戏主角动起来)
    【读书笔记《Android游戏编程之从零开始》】16.游戏开发基础(动画)
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9354371.html
Copyright © 2011-2022 走看看