jquery 样式与动画

小鱼儿 2022-05-28 14:05 159阅读 0赞

### 修改css ###

css是对一张网页起到修饰作用， 通过jquery可以动态的操作css。  
测试代码：

jquery提供.css()方法， 这个方法是结合getter和setter于一身的， 既可以获取也可以设置。  
获取一个css属性值

$('#mydiv').css('width');

获取多个属性值, 用\[\]包裹

$('#mydiv').css(['width', 'height']);

设置一个值

$('#mydiv').css('width','1000px');

同时设值多个值, 类似与创建对象。

$('#mydiv').css({
       width:'1000px',
                            height:'1000px'});

###### 修改网页字体大小的例子 ######

通过这个例子，来感受下css()方法。  
页面3个按钮功能分别还原字体， 字体放大， 字体缩小

<div id="switcher"> 
     <div class="label">Text Size</div> 
     <button id="switcher-default">Default</button> 
     <button id="switcher-large">Bigger</button> 
     <button id="switcher-small">Smaller</button> 
    </div> 
    <div class="speech" style="font-size: 20px;"> 
     <p>Fourscore and seven years ago our fathers brought forth 
     on this continent a new nation, conceived in liberty, 
     and dedicated to the proposition that all men are created 
     equal.</p> 
     ... 
    </div>

再来看看js部分, $speech.css(‘font-size’); 中的font-size也可以写成驼峰式fontSize，parseFloat()方法可以将”12px” 转成12， 很方便， this.id是js的写法， 就可以获取当前按钮的id, 若用jquery的就是`$(this).attr('id')` 。

$(document).ready(function(){ 
    
            var $speech = $('div.speech');
            var defaultSize =  $speech.css('font-size');
    
            $('#switcher button').on('click',function(){ 
                var num = parseFloat($speech.css('font-size'));
                console.log(this.id);
                switch(this.id){
                    case 'switcher-default':
                        $speech.css('fontSize', defaultSize);
                        break;
                    case 'switcher-large':
                        num *= 2;
                        $speech.css('fontSize', num+'px');
                        break;
                    case 'switcher-small':
                        num /= 2;
                        $speech.css('fontSize', num+'px');
                        break;
                }
            });
        });

###### 显示段落的例子 ######

如下， 页面上有两个段落

<div class="speech"> 
     <p>Fourscore and seven years ago our fathers brought forth 
     on this continent a new nation, conceived in liberty, 
     and dedicated to the proposition that all men are 
     created equal. 
     </p> 
     <p>Now we are engaged in a great civil war, testing whether 
     that nation, or any nation so conceived and so dedicated, 
     can long endure. We are met on a great battlefield of 
     that war. We have come to dedicate a portion of that 
     field as a final resting-place for those who here gave 
     their lives that the nation might live. It is altogether 
     fitting and proper that we should do this. But, in a 
     larger sense, we cannot dedicate, we cannot consecrate, 
     we cannot hallow, this ground. 
     </p> 
     <a href="#" class="more">read more</a> 
     ... 
    </div>

先将第二个段落隐藏， 通过查看更多连接，再展开第二个段落。

$(document).ready(function(){ 
            $('p:eq(1)').hide();
    
            $('.more').on('click',function(){ 
                $('p').show();
                $(this).hide();
            });
        });

其中`$('p:eq(1)').hide();` 还可以写成`$('p').eq(1).hide();`

### 效果和时长 ###

可以在show() 和hide() 方法中加数字参数来达到减慢速度效果, 这里的500表示0.5秒

$('.more').on('click',function(){ 
                $('p').show(500);
                $(this).hide();
            });

在show和hede时还可以有透明度改变效果， 方法如下

$('.more').on('click',function(){ 
        $('p').eq(1).fadeIn('slow'); 
            $(this).fadeOut('hide'); 
    });

###### 滑上滑下 ######

让元素产生上下滑动的效果，

$('p').eq(1).slideUp('hide');
            $('.more').on('click',function(){
                 event.preventDefault(); 
                 $('p').eq(1).slideDown('slow'); 
                 $(this).hide(); 
            });

###### 显示和隐藏的切换 ######

点击查看更多将显示内容， 并将read more修改为read less. 其中`$firstPara.is(':hidden')` 判断元素是否隐藏， text()方法可以修改标签值。

$(document).ready(function() { 
     var $firstPara = $('p').eq(1); 
     $firstPara.hide(); 
     $('a.more').click(function(event) { 
     event.preventDefault(); 
     if ($firstPara.is(':hidden')) { 
     $firstPara.fadeIn('slow'); 
     $(this).text('read less'); 
     } else { 
     $firstPara.fadeOut('slow'); 
     $(this).text('read more'); 
     } 
     }); 
    });

###### 自定义动画效果 ######

用的是animate()方法，参数形式如下  
`$(selector).animate(styles(必选),options（可选）)`

styles 参数表示要应用在标签上的样式, options 可以有如下选项：

speed - 设置动画的速度
    easing - 规定要使用的 easing 函数
    callback - 规定动画完成之后要执行的函数
    step - 规定动画的每一步完成之后要执行的函数
    queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
    specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

如下将options参数设为动画的速度， height:’toggle’ 表示对高进行显示和隐藏的切换。

$firstPara.animate({ height:'toggle'}, 2000);