javascript - HoverIntent 导致元素在页面上中断

Question

我目前正在进行的项目显示了许多正在参加事件的人的照片，我希望发生一个显示他们名字的悬停事件。我已经让它工作了，但它也会导致图像在这样做时变得不对齐。这是代码...

JS

$(document).ready(function() {
  $(".foo").hoverIntent(function() {
    $(this).siblings('.eventattendee').fadeIn();
  }, function() {
    $('.eventattendee').fadeOut();
  });
});



HTML

{{ event:get_attendees_of_event event_id="<?php echo $event['event_id']; ?>" }}
  {{ user:profile user_id="{{ attendee_id }}" }}
    <div class="wrapper">
      <a class="foo" href="/user_account/id/{{ attendee_id }}" >
        <img src="{{ profile_picture:image }}" class="bigimgsize organizersize has-tip tip-top" data-width="auto" title="{{ first_name }} {{ last_name }}"/>
      </a>
      <div class="eventattendee">
        <h1>{{ first_name }} {{ last_name }}</h1>
      </div>
    </div>
  {{ /user:profile }}
{{ /event:get_attendees_of_event }}


CSS

.wrapper {
  position: relative;
}
.eventattendee {
  display:none; 
  position: relative; 
  top: 19%;
  left: 50%;
}

谁能帮我解决这个问题吗？

Answer 1

Here is the simple answer in jsfiddle :

js

    $(document).ready(function () {
    $(".foo img").hover(function () {
        $(this).next("em").animate({
            opacity: "show",
            top: "0"
        }, "slow");
    }, function () {
        $(this).next("em").animate({
            opacity: "hide",
            top: "300"
        }, "slow");
    });
});

html:注意添加了 em 标签。您当然可以撕掉标题属性并添加 em，然后附加文本......但为什么要经历所有这些。

<div class="wrapper"> <a class="foo" href="#">
    <img src="blah" class="bigimgsize organizersize has-tip tip-top" data-width="auto" />
<em>first last addl info</em> 
  </a>

CSS:

.foo {
  padding: 0;
  margin: 10 2px;
  float: left;
  position: relative;
  text-align: center;
}
.foo em {
  width: 190px;
  height: 35px;
  position: absolute;
  top: 300px;
  left: 6px;
  text-align: left;
  padding: 3px;
  font-weight: bolder;
  z-index: 2;
  display: none;
  color:#FFFFFF;
}