fly.js 和 poshytip 插件的结合， 形成加入购物车的动画效果

页面元素：

 HTML Code 

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div  class= "gp-sa gp-set-x set-x ex-mar floatL zb xgx-bor" >    <span>设置指标 </span>    <div  class= "pull-down"  style= "display: none;" >      <ul  id= "indexSetter"  class= "sidebar-menu" ></ul>      <ul  class= "gp-set-btn" >        <li data-modelid= "FOF-select-13"  id= "indexSet_submit"  class= "set-btn-ok" >确定 </li>        <li  id= "indexSet_cancel"  class= "set-btn-cancel" >取消 </li>      </ul>    </div> </div>

js 代码如下：

var event = window.event || arguments.callee.caller.arguments[0];

 JavaScript Code 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

$( '#tip-yellowsimple').attr( 'title', text); $( '#tip-yellowsimple').poshytip( {     className :  'tip-yellow',     showTimeout :  1,     alignTo :  'target',     alignX :  'center',     offsetY :  2,     fade :  true,     allowTipHover :  false } ); var offset = $( "#tip-yellowsimple").offset(); var flyer = $( '<div class="u-flyer">' + text +  '</di>'); flyer.fly( {     start :     {         left : event.pageX,         top : event.pageY     },     end :     {         left : offset.left +  10,         top : offset.top +  10,         width :  0,         height :  0     },     onEnd :  function ()     {         $( '#tip-yellowsimple').poshytip( 'show');         setTimeout( function ()         {             $( '#tip-yellowsimple').poshytip( 'hide');         },  1000);          //确保隐藏         $( '#tip-yellowsimple').poshytip( 'hide');          this.destory();     } } );