2012-04-04 2 views
0

Для портфолио я создал запись с изображением и надписью с дополнительным подтекстом. При наведении на изображение изображение изменяется с оттенков серого на цвет (замена изображения css). При зависании над надписью он скользит вверх и показывает подтекст.Объедините два сценария наведения jQuery

Я хотел бы объединить эти две функции. Когда я нахожусь где-нибудь в записи, я бы изменил изображение с оттенков серого на цвет, а подтекст - вверх.

Я создал JSfiddle: http://jsfiddle.net/blendwerk/q8HtS/

Как я могу achive своей цели. Я поддерживаю любую помощь.

ответ

0

http://jsfiddle.net/q8HtS/3/

Вам просто нужно приложить события мыши на всей площади с изображением и текстом, а также для страхования пересвязать событие, которое вы можете установить пространство имен пересвязать их раздельно в будущем.

+0

Все права сохранены. Спасибо за быструю помощь. – Paul

0

Попробуйте добавить только одно событие парения на оберточную DIV, как этот

http://jsfiddle.net/C8yV7/

Примечание вы можете также необходимо ограничить размер DIV, который в настоящее время 100% от ширины страницы

+0

На самом деле, есть больше divs вокруг обертки изображения. Но спасибо за совет. – Paul

0

Вот нужный эффект:

$(function() { 
    $(".fadeimg").find(".spanimg").hide(); 
    $(".fadesub").find(".spansub").hide(); 

    $(".fadeimg").hover(
     function(){ 
      $(this).find(".spanimg").stop(true, true).fadeIn(1000); 
      $(this).next().find(".spansub").stop(true, true).slideDown(500); 
     }, 
     function(){ 
      $(this).find(".spanimg").stop(true, true).fadeOut(1000); 
      $(this).next().find(".spansub").stop(true, true).slideUp(500); 
     } 
    ); 
    $(".fadesub").hover(
     function() { 
      $(this).find(".spansub").stop(true, true).slideDown(500); 
      $(this).prev().find(".spanimg").stop(true, true).fadeIn(1000); 
     }, 
     function() { 
      $(this).find(".spansub").stop(true, true).slideUp(500); 
      $(this).prev().find(".spanimg").stop(true, true).fadeOut(1000); 
     } 
    ); 
}); 
Смежные вопросы