Need help with Enquire.js

[mikes02]

What I am trying to do is if it’s 64em or above to use a jQuery slide down animation, and if it’s below that to remove the animation and instead append a link as you can see in the code. However, I am running into issues, when I size the browser down the animation still remains and the append fires, but when I size back up the append stays there. Is there a way to accomplish what I am trying to do with Enquire?

    enquire.register("screen and (min-width: 64em)", {
    match : function() {
        $('.hero .col3').hover(function () {
            $(this).find('.drawer-inner').stop().slideDown(100);
        }, function () {
            $('.drawer-inner').stop().slideUp(100);
        });
    },  
    unmatch : function() {
        $('.hero .col3 .copy').append('<p>Test</p>');
    }
}); 

[mikes02]

OK so I switched it to this and it seems to be working now, but my question is, how would I set it up so that if it’s not min-width: 64em I can append something else instead?

    //Slider
$(".hero .col3").hover(function () {
    $(this).find('.drawer-inner').stop(true, true).slideDown(100);
}, function(){
    $(this).find('.drawer-inner').stop(true, true).slideUp(100);
});     

//Home Page 3 Columns
enquire.register("screen and (min-width: 64em)", {
    match : function() {
        $(".drawer").show();    
    },  
    unmatch : function() {
        $(".drawer").hide();
    }
}); 

[Author]

Posts