JQuery Text slideDown / slideUp Наложение на изображение продолжает подпрыгивать?

Я пытаюсь воспроизвести эффект наложения текста, возникающий при наведении курсора мыши на изображение, которое можно найти на веб-сайте Guardian.

У меня это работает, за исключением случаев, когда моя мышь перемещается по области текстового следа, которую область отскакивает (slideDown slideUp) несколько раз.

Я думаю, это потому, что область текстового следа становится фокусом и вызывает событие mouseout.

В любом случае любые предложения / советы будут действительно полезны. Большое спасибо, Бен...

mypage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='en-en' xml:lang='en-en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <title>TEST</title>
    <style type="text/css">
      .pixie {
        width: 870px;
        padding: 0;
        margin: 0;
      }

      .strap {
        padding: 0;
        margin: 0;
      }

      div.caption{
        padding-left: 10px;
        /*background-color: #a5a5a5;*/
        background-color: #e03d32;
        color: white;
      }
      .caption h3 {
        color: white;
      }

      .pixie a,
      .pixie div,
      .pixie a:hover {
        display: block;
        position: relative;
        text-decoration: none;
      }

      .pixie div.trail-text {
        color: #333;
        background-color: transparent;
        background-image: url(../images/grey-bg.png);
        background-repeat: repeat;
      }

      .pixie div.trail-text {
        display: none;
        margin-top: 0;
        position: absolute;
        overflow: hidden;
        text-align: left;
        padding-top: 2em;
        padding-bottom: 0;
        z-index: 10;
        height: 4.25em;
        width: 870px;
      }
    </style>
    <script src='javascripts/jquery-1.3.2.min.js' type='text/javascript'></script>
    <script src='javascripts/main.js' type='text/javascript'></script>
  </head>

  <body>
    <div class='pixie'>
      <div class='caption'>
        <h3>Some Big Heading</h3>
        <p class='strap'>Some strapline of stuff</p>
      </div>
      <div class='trail-text'>
        The <strong>Overlay text</strong> which should appear and then disappear.
      </div>

      <img alt='overlay example image' class='imgmain' src='/images/east-hamstead.jpg' title='' />
    </div>
  </body>
</html>

main.js

$(document).ready(function(){

  $("div.trail-text").attr("style", "display: none;");

  if ($(".pixie,div.trail-text")) {
    var pixies = $(".pixie,div.trail-text");
    $(pixies).mouseover(function() {
      $(this).find("div.trail-text").slideDown("fast")
    }).mouseout(function() {
      $(this).find("div.trail-text").slideUp("fast")
    });
  };
});
Источник

1 ответ

Решение

Проблема в том, что mouseover а также mouseout события всплывают вверх, что означает, что они запускаются каждый раз, когда мышь входит или покидает какой-либо элемент внутри вашего элемента div.

Вы должны использовать JQuery's hover метод, как это:

$(".pixie,div.trail-text").hover(
    function() { $(this).find("div.trail-text").slideDown("fast"); },
    function() { $(this).find("div.trail-text").slideUp("fast"); }
);
Источник
Другие вопросы по тегам