Javascript / JQuery需要魔术

时间:2012-08-13 05:34:50

标签: javascript jquery css

我在li放置了页面底部的导航链接,每个链接都有一个图像。在鼠标悬停时,在进入时我将li的顶部设置为图像大小的负值,以便图像向上滑动,并且在鼠标离开时我已经进入前0位。

该要求包括div,每个li爬升,有一些内容,并随li下降。现在,问题就出现了,当我离开li以在div中输入鼠标时,li会将div带到mousemove。我已尝试在mouseleave上绑定div事件,该事件采用鼠标坐标并检查鼠标是否在div中,但它运行正常但在尝试超过4或5次之后,它每次停止动画div,萤火虫没有错误。

我在css中尝试了它,包括li中的li;但是对于每个divli与所有左div重叠,否则它本来就是小菜一碟。

在下面的代码中,bgIdeas是上面提到的 a.cache.brand_nav.find("li a").hover(function (c) { if (a.isTablet && c.currentTarget.href !== f) d.location = c.currentTarget.href; else { c = b(this); c.stop(true, true).animate({ top: '-' + c.find("img").height() + 'px' }, 250, 'easeInCirc'); $('#bgIdeas').stop(true, true).animate({ bottom: '+' + c.find("img").height() + 'px' }, 500, 'easeInCirc', false); } }, function () { c = b(this); $('#bgIdeas').stop(true, true).animate({ bottom: '0px' }, 250, 'easeInCirc'); c.stop(true, true).animate({ top: '0px' }, 250, 'easeInCirc'); clearInterval(myRecFunc); $('.bgs').fadeIn(1000).show(); continueSlideShow(); });

的Javascript

    <ul class="clearfix">

  <li>
    <a style="top: 0px;" href="#" title="Ideas" class="ideas">
    <span class="top">
        <span class="logo">Ideas</span>
        <span class="description">abc<br>
          Click Here</span>
          <span class="creator"><small>abc</small><br>
          Click Here</span>
    </span>
    <img src="images/abc_thumb.jpg" alt="Ideas">
    </a>
  </li>

  <li>
      <a style="top: 0px;" href="#" title="def" class="def">
      <span class="top">
          <span class="logo">Def</span>
          <span class="description">Def<br>
          Click Here</span>
          <span class="creator"><small>Def</small><br>
          Click Here</span>
      </span>
      <img src="images/def_thumb.jpg" alt="Def">
      </a>
  </li>

  <li>
      <a style="top: 0px;" href="#" title="ghi" class="ghi">
      <span class="top">
          <span class="logo">ghi</span>
          <span class="description">ghi<br>
          Click Here</span>
          <span class="creator"><small>ghi</small><br>
          Click Here</span>
      </span>
      <img src="images/ghi_thumb.jpg" alt="ghi">
      </a>
  </li>

  <li>
      <a style="top: 0px;" href="#" title="jkl" class="jkl">
      <span class="top">
          <span class="logo">jkl</span>
          <span class="description">jkl<br>
          Click Here</span>
          <span class="creator"><small>jkl</small><br>
          Click Here</span>
      </span>
      <img src="images/jkl_thumb.jpg" alt="jkl">
      </a>
  </li>

  <li>
      <a style="top: 0px;" href="#" title="mno" class="mno">
      <span class="top">
          <span class="logo">mno</span>
          <span class="description">mno<br>
          Click Here</span>
          <span class="creator"><small>mno</small><br>
          Click Here</span>
      </span>
      <img src="images/mno_thumb.jpg" alt="mno">
      </a>
  </li>

</ul>

注释代码是我绑定mousemove事件的代码,如果指针位于div上,则阻止li下降。

HTML

{{1}}

0 个答案:

没有答案