jquery随记（效果）---一些特效2011.08.22

最新推荐文章于 2022-10-18 11:18:12 发布

bzuld

最新推荐文章于 2022-10-18 11:18:12 发布

阅读量639

点赞数

分类专栏： jquery---随记文章标签： jquery function less stylesheet button class

本文链接：https://blog.csdn.net/bzuld/article/details/6708663

版权

jquery---随记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍了使用jQuery实现页面元素的显示、隐藏、淡入淡出及滑动切换的特效，包括hide(), show(), fadeIn(), fadeOut(), slideToggle()等常用函数的应用与参数设置。

摘要由CSDN通过智能技术生成

********************************************************************************************************************************************

一些常见的特效函数：

.hide()//隐藏

.show()//显示

.fadeIn()//淡出

.fadeOut()//淡入

.slideToggle()//划动出现、消失

.slideUp('slow')

.slideDown('slow')

.fadeTo('slow',0.5)//

.fadeTo('slow',1.0)//

*********************************************************************************************************************************************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="Untitled-2.css" />
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//hide()和show()
/*$('p:eq(1)').hide();
$('a.more').click(function(){
  $('p:eq(1)').show();
  $(this).hide();
  return false;//避免超连接的默认操作
  })*/

//为显示隐藏添加速度
//show(param):param的值：'slow'、'fast'、'normal'还可以说自己想要的数字;
/*$('p:eq(1)').hide();
$('a.more').click(function(){
  $('p:eq(1)').show('slow');
  //$('p:eq(1)').show(850);
  $(this).hide();
  return false;//避免超连接的默认操作
  })*/

//淡入淡出--fadeIn()和fadeOut();
/*$('p:eq(1)').hide();
$('a.more').click(function(){
  $('p:eq(1)').fadeIn('slow');
  $(this).hide();
  return false;//避免超连接的默认操作
  })*/

//淡入淡出的复合效果
/*$('a.more').click(function(){
  $firstPara=$('p:eq(1)');
  if($firstPara.is(':hidden')){
   $firstPara.fadeIn('slow');
   $(this).text("read less");
   }
  else{
   $firstPara.fadeOut('slow');
   $(this).text("read more");
   }
  })*/

//滑动的复合效果----slideToggle()
/*$('a.more').click(function(){
  $firstPara=$('p:eq(1)');
  $firstPara.slideToggle('slow');
  if($firstPara.is(':hidden')){
   $(this).text("read less");
   }
  else{
   $(this).text("read more");
   }
  })*/

//animate()应用:实现淡入淡出
/*$firstPara=$('p:eq(1)');
$firstPara.hide();
$('a.more').click(function(){
  $firstPara.animate({opacity:'toggle'},'slow');
  if($(this).text()=="read more"){
   $(this).text("read less");
   }
  else{
   $(this).text("read more");
   }
  })*/

//animate()实现滑动和淡入淡出
/*$firstPara=$('p:eq(1)');
$firstPara.hide();
$('a.more').click(function(){
  $firstPara.animate({opacity:'toggle',
   height:'toggle'},'slow');
   if($(this).text()=="read more"){
    $(this).text("read less");
    }
   else{
    $(this).text("read more");
    }
  })*/

//animate()实现的特效
$('.label').click(function(){
  var paraWidth=$('.p1').outerWidth();
  var $switcher=$(this).parent();
  var switcherWidth=$switcher.outerWidth();
  var w=paraWidth - switcherWidth;
  $('#switcher').animate({left:'80%',height:'+=20px'},'slow');
  });

});
</script>
</head>

<body>

    <div id="switcher">
    <div class="label">Text Size </div>
        <button id="switcher-default">Default</button>
        <button id="switcher-larger">Bigger</button>
        <button id="switcher-small">Small</button>
    </div>
    <div class="speech">
    <p class="p1">Fourscore and seven years ago our fathers brought forth
        on this sontinent a new nation,conceived in liberity,
            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 didicated,
            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 cannont consecrate,
            we cannot ballow,this ground.
        </p>
        <a href="#" class="more">read more</a>
    </div>
</body>
</html>