jQuery笔记之三事件和动画—仿登陆效果

时间：2011年8月26日分类：JavaScript , WordPress 标签：jQuery‚ WordPress‚ 仿登陆评论：19

这是 jQuery 笔记的第三篇，主要叙述的是 jQuery 中的事件和动画部分。熟悉 jQuery 的童鞋会发现，本博的新主题自用新主题Especial Line beta 0.5测试，在页脚，导航，侧边栏等都使用了 jQuery 事件和动画。不过在这篇笔记中，将会以更为常用的 WordPress 例子—— WordPress 仿登陆效果，作为叙述例子。所以这篇笔记同时也是 WordPress 教程！

首先简单说一说仿登陆的具体操作，用户第一次登陆时会出现用于填写评论者资料的框，当用户评论完成后，将会以 cookie 的方式记录评论者资料，一年后 cookie 自动清除，当用户再次评论时填写评论者资料的 div 将会隐藏，当用户点击“ Change ”时可以再次编辑评论者资料，同时 Change 字样会改为“ Finish ” ，点击 Finish 时填写评论者资料的 div 将会再次隐藏，同时 Change 字样将会改为 Change Again 。

以下是分步叙述如何使用 jQuery 实现以上效果，如果只想实现效果的童鞋可以直接看代码。

1.加载 jQuery 库，这是必须的。

2.把 comments.php 的评论者资料框代码和评论框代码按如下修改：

<?php if(isset($_COOKIE['comment_author_email_'.COOKIEHASH]) && isset($_COOKIE['comment_author_'.COOKIEHASH]))  : ?>
    <div class="commentwelcome">
    <?php printf(__('欢迎发表评论! <strong>%1s</strong> '), $comment_author); ?><a id="edit_profile" title="重新填写资料" href="javascript:void(0);"><span>Change</span></a>
    </div>
<?php endif; ?>

<div class="<?php echo $comment_author_email ? 'hidden' : 'profile'; ?>">           
     <!-- 评论者资料框代码 -->
</div>       
<!-- 评论框代码 -->

在上面的代码中，会以 cookie 的方式记录评论者资料，并把评论者资料框的 div 赋予“ hidden ”的 class ，因此对于曾评论的访客，需要先隐藏起评论者资料框的 div ，可以使用 jQuery 的hide()事件隐藏该 div ，如果 jQuery 加载速度较慢，会出现打开页面时先出现 div ，片刻后再突然隐藏 div 的情况，这样显然不利用户体验，因此也可以直接写一条 css ——.hidden {display: none; }。

$('.hidden').hide();

3.然后再使用toggle()事件，slideUp()和slideDown()动画实现编辑评论者资料的功能。

$('#edit_profile').toggle(function(){
       $('.hidden').slideDown();
       },function(){
       $('.hidden').slideUp();
       });

4.为了提高用户体验，还需要使用text()方法在点击“Change”时把 Change 的字样改为“ Finish ”，当点击 Finish 时再把 Finish 字样改为“ Change Again ”。把以上代码整合，完整的 jQuery 代码如下：

jQuery(document).ready(function($){
$('.hidden').hide();
$('#edit_profile').toggle(function(){
        $('.hidden').slideDown();
        $('#edit_profile span').text("Finish");
        },function(){
        $('.hidden').slideUp();
        $('#edit_profile span').text("Change Again");
        });

});

具体的效果可以看本页的评论部分。

最后唠叨几句，明天便要开学了，新的学期又将会开始，之前推迟设计的企业网站准备要开始做了，而 jQuery 系统学习还要继续，又将会是一个忙碌的学期初了！

本文由 Kayo Lee 发表，本文链接：https://kayosite.com/jquery-study-notes-three-event-and-animation.html

评论列表

Demon
2011-8-26 13:05 回复

会代码真好。可以自己折腾。
- Kayo
  2011-8-26 13:14 回复
  
  @Demon 嗯嗯，折腾代码是我玩WordPress的一大动力！不过我也想像Demon那样，同时折腾PS。
  - Demon
    2011-8-27 11:25 回复
    
    @Kayo 我都是个半调子的说。
    - MurphyL
      2011-8-28 10:30 回复
      
      @Demon 过度的前序就是…..什么来着？~~~
      - Kayo
        2011-8-28 10:37 回复
        
        @MurphyL 什么意思？不懂！
      - MurphyL
        2011-8-28 12:50 回复
        
        @MurphyL “谦虚”~~好像是打错字了~~
        
        Kayo
        2011-8-28 17:10 回复
        
        @MurphyL 原来是这样，懂了~
Demon
2011-8-30 17:14 回复

我真没谦虚好不。
- Kayo
  2011-8-30 17:15 回复
  
  @Demon 我发觉这楼激动起来了！
  - Demon
    2011-8-30 17:29 回复
    
    @Kayo 最近我吃素的。木有鸡冻。
    - 小白
      2012-10-02 7:13 回复
      
      @Demon 给点硬的要不？
双陈记
2011-9-02 12:51 回复

学生就是好，有得学，还有得折腾
- Kayo
  2011-9-02 20:21 回复
  
  @双陈记嗯嗯，做学生失败的代价也是最小的，所以要抓紧时间折腾！
分享元素
2012-1-27 23:27 回复

强人,经常来学学
- Kayo
  2012-1-28 23:01 回复
  
  @分享元素努力学习中，还不是强人呢！欢迎一起交流噢！
wnczwl369
2013-5-10 10:40 回复

评论效果，测试。呵呵
强
2014-2-06 5:23 回复

哈哈，不错
强
2014-2-06 5:23 回复

把车就
强
2014-2-06 5:24 回复

输入回复内容

jQuery笔记之三事件和动画—仿登陆效果

你可能也喜欢

评论列表

回复