jQuery на CargoCollective устаревший. hover / .mouseover - PullRequest
Новая
       9

jQuery на CargoCollective устаревший. hover / .mouseover

1 голос
/ 23 февраля 2012

Создание сайта на CargoCollective, но, похоже, они используют jQuery 1.4.2, который, похоже, не обладает необходимой мне функциональностью.

Итак, результат, к которому я стремлюсь, таков: http://jsfiddle.net/hendos43/a3hFh/1/

Если по какой-то причине вы этого не видите, то, если можете, пропустите докод:

Цель:

Галерея фотографий сотрудников, которая при наведении на них отображает био (отдельный div), который не исчезнет на onmouseOut (когда мышь перестает зависать над изображением), но будет оставаться там до тех пор, пока другое изображение не будет наведено, вызывая следующее событие наведения мыши.

Я использовал следующий код:

JS: 

 $(document).ready(function() {
    $('a[id^="link"]').mouseover(function() {
        $div = $('div#' + $(this).data('hide'));
        $div.siblings('[name^="people_bio"]').fadeOut(0).end().fadeIn(200, function() {
            if (!$div.is(':visible')) {
                $('nothing').fadeIn(40);
            }
        });
    });
});​

CSS: 

#chris,
#patrick,
#jonathan,
#toby { position:absolute;
    left:285px;
    top:10px;
    border: 0px;
    background:none;
    padding: 5px; 
    width: 150px;
}

#holder { width:270px;
    position:absolute;
    top:10px;
    left:10px;}                

.hidden{
    display:none;
}
.shown{
    display:block;
}
​

HTML: 

<div id="holder">
    <a id="link_chris" href="javascript:"  data-hide="chris"><img src="http://payload.cargocollective.com/1/2/77014/2272969/patrick%20crop.jpg"></a>
    <a id="link_patrick" href="javascript:"  data-hide="patrick"><img src="http://payload.cargocollective.com/1/2/77014/2272969/patrick%20crop.jpg"></a>
    <a id="link_jonathan" href="javascript:"  data-hide="jonathan"><img src="http://payload.cargocollective.com/1/2/77014/2272969/patrick%20crop.jpg"></a>
    <a id="link_toby" href="javascript:"  data-hide="toby"><img src="http://payload.cargocollective.com/1/2/77014/2272969/patrick%20crop.jpg"></a>
</div>

      <div name="people_bio" id="chris" class="hidden">chris' bio</div>
      <div name="people_bio" id="patrick" class="hidden">patrick's bio</div>
      <div name="people_bio" id="jonathan" class="hidden">jonathan's bio</div>
      <div name="people_bio" id="toby" class="hidden">toby's bio</div>
​

К сожалению, это, похоже, не работает, возможно, из-за того, что в версии 1.4 в jQuery были некоторые изменения в работе этой функции.4, а cargo использует 1.4.2?

Используя параметры теста в jsFiddle, он работает в 1.4.4, но не в 1.4.2, и соединение 1.7 в пользовательском разделе HTML, кажется, нарушает остальныесайта, и заставьте эту функцию работать, но div игнорируют их позицию в стиле CSSв любом случае.Также пытались. Однако с теми же эффектами.

Кто-нибудь получил какие-либо решения, пожалуйста?

(Пожалуйста, игнорируйте, что изображения одинаковы, это иллюстративно).

1 Ответ

0 голосов
/ 23 февраля 2012

Вместо использования data вы можете использовать rel

Демо работает на 1.3.2

...