Question

我的2 div动画感谢下面的jquery脚本。当屏幕小于700px时，div可以使用较小的方块（35px而不是50px）。仅当屏幕小于.animate({width:100px});时，我才希望70px动画显示700px。为此，我需要在我的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语句。另外，我为span 10px设置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>

Answer 2

如果您使用的是jQuery，可能需要查看与resize()函数结合的width()事件。

像...一样的东西。

$(window).resize(function() {
    if( $(window).width() < 700 ) {
        // magic
    }
}

如何使jquery适应`@media（max-width）`

2 个答案: