Основная причина вашей проблемы заключается в том, что вам нужен вызов .siblings().stop(), в дополнение к $(this).stop() (который у вас уже есть).
После того, как вы исправите это, вы увидите новую проблему, в которой ваши подписи изначально работают правильно, но затем начинают исчезать только частично, после того, как они были повторно наложены (и в конечном итоге они полностью исчезнут, пока Вы перезагрузите страницу). Это происходит из-за того, что .fadeIn() работает в сочетании с .fadeOut() - fadeIn(), не всегда вписывается в opacity:1 - вместо этого он встраивается в любую непрозрачность, примененную в то время fadeOut() был вызван ранее.
Чтобы обойти это, вы можете использовать animate({opacity:1},'slow') вместо fadeIn('slow') - или вы можете использовать более сжатые (и более четкие) .fadeTo('slow',1) ( документы ). (обратите внимание, что в fadeTo порядок параметров отличается от других функций анимации - сначала идет продолжительность, затем значение, к которому вы хотите добавить плавность).
Конечно, вы также можете использовать fadeTo() вместо вашей другой анимации непрозрачности - хотя, конечно, нет ничего плохого в использовании animate(), как вы показали - эти два эквивалента. (разумеется, вам нужно набрать animate(), если вы хотите манипулировать несколькими свойствами CSS одновременно.)
Когда все это объединяется, это может выглядеть примерно так:
$(function() {
$('.image').each(function() {
$(this).hover( function() {
$(this).stop().fadeTo('slow',0.3)
.siblings().stop().fadeTo('slow',1);
}, function() {
$(this).stop().fadeTo('slow',1)
.siblings().stop().fadeTo('slow',0);
});
});
});
Вы можете увидеть этот код в действии на jsFiddle: http://jsfiddle.net/coltrane/XstpE/
(обратите внимание: этот пример зависит от размещенных ресурсов, которые идут вместе с исходным сообщением выше, поэтому он не будет работать, если они будут перемещены или станут недоступны по другим причинам).
Также обратите внимание: в приведенном выше примере я включил использование .each(), как вы это делали в исходном примере, но я хочу отметить, что это действительно не нужно.
Следующее эквивалентно (и обычно считается «лучшей» техникой jQuery):
$(function() {
$('.image').hover(function() {
$(this).stop().fadeTo('slow', 0.3)
.siblings().stop().fadeTo('slow', 1);
}, function() {
$(this).stop().fadeTo('slow', 1)
.siblings().stop().fadeTo('slow', 0);
});
});
Когда вы применяете обработчик событий к многоэлементному набору, jQuery автоматически связывает один и тот же обработчик с каждым элементом в наборе. (Я обновил мой пример на jsFiddle (ссылка выше), чтобы показать код без the each()).
Редактировать
OP указывает на то, что при наведении курсора на заголовок (который находится сверху изображения) срабатывает обработчик mouseleave, что приводит к выполнению действия разворачивания. Желаемое поведение - чтобы заголовок , а не запускал развертывание.
Эта проблема возникает из-за того, что заголовок «затеняет» изображение, а hover() применяется к изображению. Когда мышь надвигает заголовок, его больше нет на изображении (он находится на заголовке), поэтому браузер запускает отпуск мышью на изображении. Та же самая ситуация может вызвать и другие тонкие проблемы, особенно если добавить более сложный контент.
Чтобы решить эту проблему, я рекомендую просто применить hover() на один уровень вверх (к контейнеру, содержащему изображение и заголовок), вместо того, чтобы применять его непосредственно к изображению. В этом случае этот контейнер $('.entry'). Код изменится так:
$(function() {
$('.entry').hover(function() {
$('.image',this).stop().fadeTo('slow', 0.3)
.siblings().stop().fadeTo('slow', 1);
}, function() {
$('.image',this).stop().fadeTo('slow', 1)
.siblings().stop().fadeTo('slow', 0);
});
});
вот новая версия jsFiddle