WickyNilliams / enquire.js

Awesome Media Queries in JavaScript
http://wicky.nillia.ms/enquire.js/
MIT License
3.63k stars 269 forks source link

Enquire.js and Fullpage.js not playing nice #151

Closed JensNielsen81 closed 7 years ago

JensNielsen81 commented 7 years ago

I am trying to get Enquire.js to work with fullpage.js.

I am animating some elements on afterLoad, and would like those animations to be deferent on mobile.

Here is an example og the afterLoad without Enquire: `afterLoad: function(anchorLink, index){

    var $serviceAnimation = $('.services .is-animated')

    //Services
    if(index == 1){
        //Set easing on all
        $serviceAnimation.slice(0,8).css({animationTimingFunction: "ease-in-out"});
        //h1
        $serviceAnimation.eq(0).addClass('animated fadeIn').css({
            animationDelay: "0s",
            animationDuration: "1s"
        });
    }`

What i am aiming for with Enquire is this afterLoad: function(anchorLink, index){

var $serviceAnimation = $('.services .is-animated')

//Services if(index == 1){ //Set easing on all $serviceAnimation.slice(0,8).css({animationTimingFunction: "ease-in-out"}); //h1 enquire.register("screen and (max-width: 767px)", { match : function() { $serviceAnimation.eq(0).addClass('animated fadeIn').css({ animationDelay: "0s", animationDuration: "1s" }); }, unmatch : function() { $serviceAnimation.eq(0).addClass('animated fadeInLeft').css({ animationDelay: "0s", animationDuration: "1s" }); } }); } }

But this doesn't seem to work. it only fires the matched one never the unmatched, why? if i put in a console log or alert, both fire just fine.

Sorry for the non-code gray thing, i wont show i properly.

sachya commented 7 years ago

`afterLoad: function(anchorLink, index){

var $serviceAnimation = $('.services .is-animated');

//Services`

Try putting colon on your var statement

WickyNilliams commented 7 years ago

In an effort to clean up issues, I'm closing this. If you're still having the problem, please comment