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

Question

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

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

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

Answer 1

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

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

Answer 2

Вы бы использовали 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');
               }
            );
      });

});

Answer 3

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