知乎网首页一个延时交互的小思路

知乎首页有个交互还蛮有意思，当用户在左侧头像区选择某个头像的时候，右侧内容区域会依据鼠标在头像所留经的时间来决定是否显示所停留头像的对应内容：

今天简单说下用JQ完成这个交互的思路。先照例写下HTML/CSS，整俩div分别作为头像元素和内容区域元素：

  <div class="touxiang">这里是头像</div>
  <div class="neirong">这里是内容区域</div>

<style type="text/css">
body{
    margin:50px;
    }
.touxiang{
    border:1px solid #E5D1A1; text-align:center; width:150px; height:150px; background:#FFFDD2; float:left;
    }
.neirong{
    width:300px;height:500px; margin-left:30px;border:1px solid #E5D1A1;background:#fff;float:left;
    }
</style>

接下来是JQ部分：

function changetext(){
    $(".neirong").text('hahaha');
}

$(function(){
$(".touxiang").hover(function(){
 timeout_name = setTimeout("changetext()",3000);
      },function(){
      clearTimeout(timeout_name) ;
      })
  })

执行可看到，我们鼠标移到头像上3秒后，则内容区域内容变为“hahaha”，若在3秒内把鼠标移出头像，则内容区域内容不变。

这种效果说白了是利用.hover()来定义“鼠标经过”和“鼠标离开”头像div时所执行的事件。

如上述代码，若鼠标移到头像div上，则利用setTimeout函数来延时3秒调用changetext()函数，从而让内容区域在3秒后改变起内容；
而当鼠标离开了头像div，则利用clearTimeout函数清空对应的延时操作。

注意setTimeout所调用的函数作用域必须是全局性的，所以对changetext()函数的声明定义需要写在$(function(){...})外部。

方法还是比较简单的，这里只写了一个头像做示范，像知乎首页多头像效果也不外乎连接数据库，由于数据库里头像ID字段和内容区域内容的TXID字段是关联的，如数据库ID字段为“101”的头像,其div的id可设为id="tx101"，并将其对应区域内容从数据库提取且赋值给变量nr101;再绑定hover事件让鼠标经过$("#tx101")的时候内容区域.text(nr101)。