lundi 20 avril 2015

hide() not working as I was hoping

Am I doing something fundamentally wrong here? The original idea is if you click on any object on the carousel, info will fadeIn() at the bottom. I'm trying to understand why isn't allmsgs.hide() not functioning at all while swapping that line to m1.hide() to hide singular info works. I was really hoping that allmsgs.hide() would work to make it a bit more user-error-proof.

$(document).ready(function(){
    $(".owl-carousel").owlCarousel({
    autoPlay: 20000, 

        items : 4,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3],
        StopOnHover : true,
        lazyEffect : 5000,
        mouseDrag : true
    });

    $('#panel1').on('click',function(event){
    var pan1 = $('#panel1');
    var m1 = $('#message1');
    var allpans = $('.panels');
    var allmsgs = $('.messages');
    allmsgs.hide();
    if(pan1.hasClass('clicked')){
    allpans.css('background','#bebec5').removeClass('clicked');
        }   else{
            m1.fadeIn('slow');
            pan1.css('background','#aec6d7').addClass('clicked');
            }
    });

    $('#panel2').on('click',function(event){
    var pan2 = $('#panel2');
    var m2 = $('#message2');
    var allpans = $('.panels');
    var allmsgs = $('.messages');
    allmsgs.hide();
    if(pan2.hasClass('clicked')){
    allpans.css('background','#bebec5').removeClass('clicked');
        }   else{
            m2.fadeIn('slow');
            pan2.css('background','#aec6d7').addClass('clicked');
            }
    });

    $('#panel3').on('click',function(event){
    var pan3 = $('#panel3');
    var m3 = $('#message3');
    var allpans = $('.panels');
    var allmsgs = $('.messages');
    allmsgs.hide();
    if(pan3.hasClass('clicked')){
    allpans.css('background','#bebec5').removeClass('clicked');
        }   else{
            m3.fadeIn('slow');
            pan3.css('background','#aec6d7').addClass('clicked');
            }
    });

});

Aucun commentaire:

Enregistrer un commentaire