jquery随记（效果）---并发与排队效果(处理一组元素)2011.08.23

最新推荐文章于 2021-10-23 16:19:28 发布

bzuld

最新推荐文章于 2021-10-23 16:19:28 发布

阅读量2.5k

点赞数

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

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

版权

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

19 篇文章 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(){
//并发与排队效果
//1.1、通过连缀实现排队效果
/*$('div.label').click(function(){
  var paraWidth=$('div.speech p').outerWidth();
  var $switcher=$(this).parent();
  var switcherWidth=$switcher.outerWidth();
  var s=paraWidth - switcherWidth;
  $('#switcher')
   .animate({left:'50%'},'slow')
   .animate({height:'+=20px'},'slow')
   .animate({borderWidth:'5px'},'slow');
  });*/

//1.2、通过连缀实现排队效果
/*$('div.label').click(function(){
  var paraWidth=$('div.speech p').outerWidth();
  var $switcher=$(this).parent();
  var switcherWidth=$switcher.outerWidth();
  var s=paraWidth - switcherWidth;
  $('#switcher')
   .fadeTo('fast',0.5)
   .animate({
    'left':'50%'
    },'slow')
   .fadeTo('slow',1.0)
   .slideUp('slow')
   .slideDown('slow');
  });*/

//2.1、通过animate实现并发
/*$('div.label').click(function(){
  var paraWidth=$('div.speech p').outerWidth();
  var $switcher=$(this).parent();
  var switcherWidth=$switcher.outerWidth();
  var s=paraWidth - switcherWidth;
  $('#switcher')
   .fadeTo('fast',0.5)
   .animate({
    'left':'50%'
    },{duration:'slow',queue:'false'})
   .fadeTo('slow',1.0)
   .slideUp('slow')
   .slideDown('slow');
  });*/

//2.2、通过queue()方法将非效果方法添加到队列中去
$('div.label').click(function(){
  var $switcher=$(this).parent();
  $switcher
   .fadeTo('fast',0.5)
   .animate({left:'50%'},'slow')
   .fadeTo('slow',1.0)
   .slideUp('slow')//向上滑动，即折叠起来
   .queue(function(){
    $switcher
    .css('background-color','#f00')
    .dequeue();//让队列在中断处在衔接起来，没有该方法则后面的将不执行
    })
   .slideDown('slow');//向下滑动，即展开
  });

});
</script>
</head>

<body>

    <div id="switcher" style="border:1px solid red">
    <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>