CODEWITHSUNDEEP
jquerymedia-queries
paoloi
paoloi

Reputation: 189

Stop jQuery anitmation with media query

Hello guys I have this simple jquery animation 

    $(window).load(function() {

        //Top Header Logo Expand
$("#logo-expand").mouseenter(function() {
    $(this).animate({
        width: "170px"
    }, 300 );
});

$("#logo-expand").mouseleave(function() {
    $(this).animate({
        width: "56px"
    }, 300 );
});

    });

Now I want to disable the animation when I am in a phone resolution, how can i do that with jquery media queries, any idea?

Here's my http://jsfiddle.net/MyKnB/5/

thank you in advance

Upvotes: 1

Views: 1257

Answers (3)

SCraft
SCraft

Reputation: 59

not using media queries as im not sure its possible but I hope this helps JSFiddle

effectivly it checks the window size and then runs the animations or not

$("#logo-expand").mouseenter(function() {
  if($(window).width() > 100){  
    $(this).animate({
        width: "170px"
    }, 300 );
  } else {
    $(this).css({'width':"170px"});                               
  }
});

$("#logo-expand").mouseleave(function() {
if($(window).width() > 100){ 
    $(this).animate({
              width: "56px"
        }, 300 );
    } else {
       $(this).css({'width':"56px"});                               
    }
});

Upvotes: 0

user1
user1

Reputation: 1065

you can use window.innerWidth to determine the width of the screen and perform animation only if it is greater than certain width

$(window).load(function() {
if (window.innerWidth > 700){
    //Top Header Logo Expand
$("#logo-expand").mouseenter(function() {
$(this).animate({
    width: "170px"
}, 300 );
});

$("#logo-expand").mouseleave(function() {
$(this).animate({
    width: "56px"
}, 300 );
}
});

});

Upvotes: 2

Tim Wasson
Tim Wasson

Reputation: 3656

This worked for me: 

if($(window).width() > 320) {
    $("#logo-expand").mouseenter(function() {
        $(this).animate({
            width: "170px"
        }, 300 );
    });

    $("#logo-expand").mouseleave(function() {
        $(this).animate({
            width: "56px"
        }, 300 );
    });
}

See here: http://jsfiddle.net/MyKnB/7/

For best results, you'd probably want to throw that into a function and call it on window resize.

Upvotes: 1

Related Questions