页面旁边客服区伸缩效果

<!-- side -->
<div class="customer_left abs">
<div class="down_side csdown_sprite abs oh"></div>
<div class="down_bg csdown_sprite abs">
<a class="down_icon csdown_sprite abs" href="/html/help/browser.html"></a>
<div class="down_pt abs down_pt oh" down_type="pt"><img class="rel" src="../../images/csdown_pt.png"></div>
<div class="down_mobipt abs down_mobipt oh" down_type="mobipt"><img class="rel" src="../../images/csdown_mobipt.png"></div>
<!-- <div class="down_wxbox abs"> -->
<!-- <div class="down_wx csdown_sprite"></div> -->
<!-- </div> -->
</div>
</div>
<div class="customer_right abs">
<div class="cs_side csdown_sprite abs oh"></div>
<div class="cs_bg csdown_sprite abs">
   <div class="cs_top csdown_sprite abs open_cs oh"></div>
   <a class="cs_email csdown_sprite abs" href="mailto:hupai.kefu@gmail.com"></a>
   <a class="cs_qq csdown_sprite abs" href="http://wpa.qq.com/msgrd?v=3&uin=82957000&site=qq&menu=yes" rel="nofollow" target="_blank"></a>
<a class="ag_qq csdown_sprite abs" href="http://wpa.qq.com/msgrd?v=3&uin=83250990&site=qq&menu=yes" rel="nofollow" target="_blank"></a>

<div class="cs_phone csdown_sprite abs"></div>


</div>

</div>

//cs_down side
//get default
var customer_top = $(".customer_right").offset().top;
var sTop = $(this).scrollTop();
$(".customer_left, .customer_right").css({top: sTop + customer_top + "px"});

//get scroll
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
$(".customer_left, .customer_right").css({top: scrollTop + customer_top + "px"});
});

$(".customer_left").hover(function(){
$(".customer_right").animate({width:"50px"});
$(".customer_right").children(".cs_bg").animate({width:"0px"});

var down = $(this);
clearTimeout( daywin[ down + '_timer' ] );
daywin[ down + '_timer' ] = setTimeout(function(){
down.animate({left:"0px"});
},100);
},function(){
var down = $(this);
clearTimeout( daywin[ down + '_timer' ] );
daywin[ down + '_timer' ] = setTimeout(function(){
down.animate({left:"-150px"});
},300);
});

$(".customer_right").hover(function(){
$(".customer_left").animate({left:"-150px"});

var cs = $(this);
clearTimeout( daywin[ cs + '_timer' ] );
daywin[ cs + '_timer' ] = setTimeout(function(){
cs.animate({width:"200px"});
cs.children(".cs_bg").animate({width:"150px"});
},100);
},function(){
var cs = $(this);
clearTimeout( daywin[ cs + '_timer' ] );
daywin[ cs + '_timer' ] = setTimeout(function(){
cs.animate({width:"50px"});
cs.children(".cs_bg").animate({width:"0px"});
},300);
});

$(".customer_left .down_pt img").hover(function(){
$(this).animate({top:"-53px"});
},function(){
$(this).animate({top:"0px"});
});

$(".customer_left .down_mobipt img").hover(function(){
$(this).animate({top:"-53px"});
},function(){
$(this).animate({top:"0px"});
});