jquery - 如何使 jquery 适应 `@media (max-width)`

Question

我的 2 div 动画感谢我下面的 jquery 脚本。当屏幕小于 700px 时，div 变成更小的正方形(35px 而不是 50px)。我希望 .animate({width:100px}); 仅在屏幕小于 700px 时将动画设置为 70px。为此，我需要在我的 jquery 脚本中加入一个新变量，它会考虑 @media (max-width:700px) 是否就位。但是我还没有找到这样做的方法。帮助! :)

$(document).ready(function(){ 
$(".rightSocial a").hover(function(){
        $(this).stop().animate({width:"100px"});
        $(this).find('span').stop().animate({"margin-left":"50px"});
      },
      function() {
        $(this).stop().animate({width:"50px"});
        $(this).find('span').stop().animate({"margin-left":"0"});
      });
     
     
     
    });

.rightSocial {
    height:300px;
    position:fixed;
    left:0;
    top:100px;
    
  }
  
  .rightSocial a {
    display:block;
    width:50px;
    height:50px;
    margin-top:1px;
  }
  
  .twitterCont {
    background:red;
    position:relative;
  }
  
  .FBCont {
    background:blue;
    position:relative;
  }
  
  .rightTwitter {
    height:40px;
    width:50px;
    background:yellow;
    background-size:contain;
    background-repeat: no-repeat;
    position:absolute;
    margin-left:0;
  }
  
  .rightFB {
    height:40px;
    width:50px;
    background:red;
    background-size:contain;
    background-repeat: no-repeat;
    position:absolute;
    margin-left:0;
  }

@media (max-width: 700px) {
  
  .rightSocial {
  width:35px;
}

 .rightSocial a {
  width:30px;
  height:30px;
 }
 
 .rightTwitter, .rightFB {
   height:30px;
    width:30px;
 }
  
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rightSocial">
    <div>Share</div>
    <a href="#" class="twitterCont"><span class="rightTwitter" title="Twitter"></span></a>
    <a href="#" class="FBCont"><span class="rightFB" title="Facebook"></span></a>
  </div>

Answer 1

Here是它的现场演示。我使用 $( window ).width() 来获取窗口的宽度，然后只使用简单的 if 语句。我还为 10px 设置了 span 小于 margin-left 的显示器小于 700px。

$(document).ready(function(){ 
$(".rightSocial a").hover(function(){
    	if ($( window ).width() <= 700) {
            $(this).stop().animate({width:"70px"});
            $(this).find('span').stop().animate({"margin-left":"40px"});
        }
    	else {
            $(this).stop().animate({width:"100px"});
            $(this).find('span').stop().animate({"margin-left":"50px"});
        }
      },
      function() {
        $(this).stop().animate({width:"50px"});
        $(this).find('span').stop().animate({"margin-left":"0"});
      });
     
     
     
    });

.rightSocial {
    height:300px;
    position:fixed;
    left:0;
    top:100px;
    
  }
  
  .rightSocial a {
    display:block;
    width:50px;
    height:50px;
    margin-top:1px;
  }
  
  .twitterCont {
    background:red;
    position:relative;
  }
  
  .FBCont {
    background:blue;
    position:relative;
  }
  
  .rightTwitter {
    height:40px;
    width:50px;
    background:yellow;
    background-size:contain;
    background-repeat: no-repeat;
    position:absolute;
    margin-left:0;
  }
  
  .rightFB {
    height:40px;
    width:50px;
    background:red;
    background-size:contain;
    background-repeat: no-repeat;
    position:absolute;
    margin-left:0;
  }

@media (max-width: 700px) {
  
  .rightSocial {
  width:35px;
}

 .rightSocial a {
  width:30px;
  height:30px;
 }
 
 .rightTwitter, .rightFB {
   height:30px;
    width:30px;
 }
  
  }

<div class="rightSocial">
    <div>Share</div>
    <a href="#" class="twitterCont"><span class="rightTwitter" title="Twitter"></span></a>
    <a href="#" class="FBCont"><span class="rightFB" title="Facebook"></span></a>
  </div>