img-pop可以弹起,却不能下降

jike_8031070 HTML实战-极客学院路径图页... 最后由 极客学院_ASMITA 于2017年05月09日回复

  • 1 回答
  • 1.2k 浏览

(注:文件名均和老师一致)

<!DOCTYPE html>

<html>

<head>

 <title></title>

 <link rel="stylesheet" type="text/css" href="style.css">

 <script src="js/jquery-3.1.0.min.js"></script>

 <script src="js/TweenMax.min.js"></script>

 <script src="js/common.js"></script>

</head>

<body>

 <div class="coursecontent w-1000">

  <div class="lessonlist">

   <div class="learn-lessonlist cf">

    <span class="stageicon"></span>

    <div class="stagewaring-box">

     <span class="jiantou-right"></span>

     <div class="textcontent">

     <h3>第一階段:開發環境搭建</h3>

     <p>Android,環境搭建</p>

     </div>

    </div>

    <div class="lessonimgbox">

     <a href="#">

      <div class="img-box">

       <img src="./images/lesson.jpg"><!--本地圖片-->

      </div>

      <h3>Android環境搭建</h3>

      <div class="imgboxfoot">

       <span class="minandtime">30min 10課後</span>

      </div>

      <!--彈出域-->

      <div class="img-pop">

       <blockquote>

        <p>

         Java語言面嚮對象思想Java語言面嚮對象思想Java語言面嚮對象思想Java語言面嚮對象思想Java語言面嚮對象思想

        </p>

       </blockquote>

       <div class="time-user-number">

        <span>2014-10-10</span><span>2000人在學習</span>

       </div>

      </div>

     </a>

    </div>

   </div>

  </div>

  

 </div>

</body>

</html>

--------------------------------------------------------------------------

var jkcommon={

 init:function() {

  this.lessImgShow();

 },

 stopEventBubble:function(event){

  var e=event;

  if(e){

   e.stopPropagation();

  }

 },

 lessImgShow:function(){

  $('.lessonimgbox').bind("mouseover",function(e){

   var _pop=$(this).find('.img-pop');

   $(this).css({border:"2px solid #1abc9c",width:"226px",height:"226px"});

   TweenMax.to(_pop,0.5,{top:0,ease:Bounce.easeOut});// 0.5秒时长,动画效果{方向top0,...}

   jkcommon.stopEventBubble(e);

  });

  $(document).bind("mouseover",function(){

   $('.lessonimgbox').css({border:"0",width:"230px",height:"230px"});

   var _pop=$(this).find(".img-pop");

   TweenMax.to(_pop,0.5,{top:230,ease:linear.easeNone});

  })

 }

}

$(function(){

 jkcommon.init();

})

  • 极客学院_ASMITA 2017年05月09日 回答 #1楼
  • 把TweenMax.to(_pop,0.5,{top:230,ease:linear.easeNone});

    换成TweenMax.to(_pop,0.5,{top:230,ease:Linear.easeNone});

    注意:linear的l必须大写

  • 0 评论