JQuery Li с фоном исчезают изображения (исчезать в классе) - PullRequest
Новая
       10

JQuery Li с фоном исчезают изображения (исчезать в классе)

1 голос
/ 17 мая 2010

Я сейчас использую этот код: 

var gallery = $('ul#gallery').children();

$(gallery).filter(':even').not(':last').hover(function () {$(this).toggleClass('next')});

Я пытаюсь заставить его исчезнуть в этом новом классе. В настоящее время есть

с изображением в нем, без фона. Когда добавляется следующий класс, он придает ему фоновое изображение. Есть ли способ просто исчезнуть в новом классе, не заставляя изображение мигать / исчезать вообще?

1 Ответ

3 голосов
/ 18 мая 2010

Если у вас установлен jQueryUI, вы можете fade анимировать класс, добавив продолжительность. 

$(this).toggleClass('next', 500);

http://jqueryui.com/demos/toggleClass/

Но, насколько я знаю, нет отдельной настройки непрозрачности, которая влияет только на фоновое изображение. Поэтому, если вы хотите добавить это, вам нужно будет постепенно исчезнуть весь элемент, который, как вы заявили, не тот, который вы хотите.

Если вы действительно хотите получить эффект, альтернативой может быть добавление отдельного элемента к тому, который вы дали классу, и постепенный переход в этот элемент (с фоновым изображением).

Элемент должен иметь позиционирование absolute, чтобы он не влиял на остальную часть содержимого.

Вы бы получили что-то вроде:

CSS: 

li {
    position: relative;
}

.background {
    width: 100%;
    height: 100%;
    background:orange;  // This would be your background image instead
    position: absolute;
    top: 0;
    left: 0;
}

.content {
    position: relative;
}

HTML: 

<ul id='gallery'>
        <li>
            <div class='background'></div>  // Prepend and fade in
            <div class='content'>hi there</div>
        </li>
</ul>

JQuery:

hover() принимает две функции. Один, когда ты mouseenter, другой, когда ты mouseleave.

// Установить непрозрачность 0 для всех элементов .background $ ('. background'). css ({opacity: 0}); 

var gallery = $('ul#gallery').children();

gallery.filter(':even').not(':last').hover(
  function () {
       $(this).find('.background').animate({'opacity': 1}, 500);
  },
  function () {
       $(this).find('.background').animate({'opacity': 0}, 500);
});

EDIT:

К вашему сведению, вы можете изменить свой селектор, чтобы получить то, что вы хотите сразу же, без необходимости звонить по номеру .filter() и т. Д. 

var gallery = $('ul#gallery li:even:not(:last)');

gallery.hover(...

EDIT:

Изменена формулировка в первом предложении и добавлена ​​ссылка на документы.

...