эффект наведения мыши с вопросом jQuery

Допустим, у меня есть 4 imagediv (imgdiv1, imgdiv2, imgdiv3, imgdiv4) и 4 contentdiv (condiv1 condiv2 condiv3, condiv4) и 1 div основного контента (maincon) все contentdiv (кроме div основного контента) должны оставаться «скрытыми» или невидимыми . Каждый мошенник будет отображаться с эффектом затухания, когда я наведу указатель мыши на элемент изображения. Все элементы contentdiv находятся в одном месте, а элементы imagediv представляют собой своего рода меню.

Пример: если я наведу указатель мыши на imgdiv1, condiv1 появится с эффектом плавного затухания. Когда моя мышь выходит из imgdiv1, condiv1 должен стать невидимым с эффектом затухания, то же самое касается imgdiv2, imgdiv3 и imgdiv4. div maincon всегда будет там, и condivs должны просто проходить над maincon при запуске с помощью мыши на imagedivs.

Как я могу добиться этого с помощью jQuery? Каков наилучший способ?


javascript jquery mouseover effect fade
person Bruno    schedule 14.12.2009    source источник
comment
я не профессионал в jQuery, я ищу рекомендации о том, как этого добиться   -  person Bruno    schedule 14.12.2009

Ответы (3)


arrow_upward
0
arrow_downward

Вы можете использовать функцию наведения
$('#imgdiv1').hover(function(){ /*fade in code*/},function(){/*fade out code*/});

в качестве альтернативы вы можете заглянуть в JqueryUI и использовать виджет «Вкладки».

person RHicke    schedule 14.12.2009
comment
какой из них лучший на ваш взгляд? - person Bruno; 14.12.2009
comment
Честно говоря, я никогда не использовал виджет Tabs, я только играл с демонстрацией на jquery.com, и это казалось полезным, но я могу сказать вам, что функция наведения очень проста в использовании и может быть добавлена ​​к элементу в любое время, когда это очень просто просто ознакомьтесь со спецификациями docs.jquery.com/Events/hover#overout - person RHicke; 15.12.2009

arrow_upward
0
arrow_downward

Вы смотрели hover? он сочетает в себе обработчики событий mouse in / mouse out, сводя к минимуму код, который вам нужно написать.

person Jeff Paquette    schedule 14.12.2009

arrow_upward
0
arrow_downward

Вы должны использовать hover() для переключения между двумя функциями: одна при вводе мыши, другая при выходе мыши из imgdiv. Для удобства дайте вашему imgdiv дополнительный класс: «imgdiv». Это позволяет вам создать поведение один раз и прикрепить его ко всем элементам imgdiv через each(); петля.

Кроме того, дайте класс «contentdiv» всем элементам contentdiv, чтобы вы могли скрыть их одним вызовом.

$(document).ready(function(){
   // hide all that should be hidden
   $('div.contentdiv').hide();
    var divToShow= '';
    var strlength = 10;
    $('div.imgdiv').each(function(){
            $(this).hover(function(){
                //find which contentdiv to show
                var thisId= $(this).attr('id');
                strlength = thisId.length;
                divToShow = 'condiv'+thisId.charAt(strlength-1);
                $(divtoShow).stop().fadeIn('slow');
                }
               ,
                function(){
                 // when mouse leaves imgdiv...
                 $(divtoShow).stop().fadeOut('slow');
               }
            );
      });

});
person pixeline    schedule 14.12.2009