当屏幕大小改变时，如何停止jQuery的运行？

我已经使用jQuery创建了一个图库，我希望它只在全视图下工作。当浏览器更改为平板电脑或移动设备时，我希望jQuery gallery停止，我只希望gallery中的图像显示，平板电脑的图像大小为2个并排，移动设备的图像大小为1个，与浏览器视图中的4个图像相同-在图像顶部，我希望显示产品的标题

例如：

</* GALLERY JQUERY */

$(".galleryItem").mouseenter(function() {
var thisoverlay = $(this).find('.galleryOverlay');

thisoverlay.stop(true, true).animate({
height: '200',
marginTop: '-220px'
});
});

$(".galleryItem").mouseleave(function() {
 var thisoverlay = $(this).find('.galleryOverlay');

thisoverlay.stop(true, true).animate({
  height: '30',
  marginTop: '-50px'
 });
});

/* CSS */ 

.wrapper {
 width: 940px;
height: auto;
padding: 10px;
 margin-right: auto;
 margin-left: auto;
 margin-bottom: 20px;
 margin-top: 0px;
 background: #ffffff;
}

.galleryItem {
  float: left;
  width: 300px;
height: 300px;
 margin-left: 10px;
 overflow: hidden;
 cursor: pointer;
}

.galleryItem:first-child {
 margin-left: 0;
}

.Image {
  width: 300px;
height: 300px;
font-size: 60px;
font-weight: 800;
 text-align: center;
text-transform: uppercase;
 line-height: 280px;
 color: rgba(0, 0, 0, 0.2);
 background: #FFF;
}

.red img{
  width: 80%;
 height: 80%;

}

.green img{
  width: 80%;
 height: 80%;

}

.blue img{
  width: 80%;
  height: 80%;

}

.galleryOverlay {
  position: absolute;
  width: 280px;
  height: 30px;
  padding: 10px;
  margin-top: -50px;
  color: #666;
 background: #FFF;
 overflow: hidden;
 z-index: 10;

 -webkit-box-shadow: 0 -6px 6px -6px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 -6px 6px -6px rgba(0, 0, 0, 0.5);
 box-shadow: 0 -6px 6px -6px rgba(0, 0, 0, 0.5);
}

.galleryItemTitel {
 display: block;
 height: 40px;
 font-size: 22px;
line-height: 30px;
 color: #000;
}

.clear {
 clear: both;
}

/* HTML */

<div class="wrapper">
<div class="galleryItem">
<div class="fakeImage red">
<img src="images/1.jpg">
</div>
<div class="galleryOverlay">
<h2 class="galleryItemTitel">Detroit Jacket</h2>
<p class="galleryItemIntro">Material: Cotton</p>
<p>Price: AUD $599.99</p>
<p>Sizes: XS S M L XL</p>
</div>
</div>

<div class="galleryItem">
<div class="fakeImage blue">
<img src="images/2.jpg">
</div>
<div class="galleryOverlay">
<h2 class="galleryItemTitel">Sheffield Jacket</h2>
<p class="galleryItemIntro">Material: Cotton</p>
<p>Price: AUD $599.99</p>
<p>Sizes: XS S M L XL</p>
</div>
</div>

<div class="galleryItem">
<div class="fakeImage green">
<img src="images/3.jpg">
</div>
<div class="galleryOverlay">
<h2 class="galleryItemTitel">Chore Jacket</h2>
<p class="galleryItemIntro">Material: Cotton</p>
<p>Price: AUD $599.99</p>
<p>Sizes: XS S M L XL</p>
</div>
</div>

<div class="clear"></div>
</div>

<div class="wrapper">
<div class="galleryItem">
<div class="fakeImage red">
   <img src="images/5.jpg">
</div>
<div class="galleryOverlay">
  <h2 class="galleryItemTitel">Camo Jacket</h2>
  <p class="galleryItemIntro">Material: Cotton</p>
    <p>Price: AUD $599.99</p>
    <p>Sizes: XS S M L XL</p>
</div>
</div>

 <div class="galleryItem">
   <div class="fakeImage blue">
  <img src="images/6.jpg">
   </div>
   <div class="galleryOverlay">
    <h2 class="galleryItemTitel">Pender Jacket</h2>
  <p class="galleryItemIntro">Material: Cotton</p>
    <p>Price: AUD $599.99</p>
    <p>Sizes: XS S M L XL</p>
</div>

 </div>
 <div class="galleryItem">
 <div class="fakeImage green">
   <img src="images/4.jpg">
</div>
    <div class="galleryOverlay">
  <h2 class="galleryItemTitel">Ranger Jacket</h2>
  <p class="galleryItemIntro">Material: Cotton</p>
    <p>Price: AUD $599.99</p>
    <p>Sizes: XS S M L XL</p>
</div>
</div>
<div class="clear"></div>

<div class="wrapper">
<div class="galleryItem">
<div class="fakeImage red">
<img src="images/7.jpg">
</div>
<div class="galleryOverlay">
<h2 class="galleryItemTitel">Sail Jacket</h2>
<p class="galleryItemIntro">Material: Cotton</p>
<p>Price: AUD $599.99</p>
<p>Sizes: XS S M L XL</p>
</div>
</div>

<div class="galleryItem">
<div class="fakeImage blue">
<img src="images/8.jpg">
</div>
<div class="galleryOverlay">
<h2 class="galleryItemTitel">Sheffield Jacket</h2>
<p class="galleryItemIntro">Material: Cotton</p>
<p>Price: AUD $599.99</p>
<p>Sizes: XS S M L XL</p>
</div>
</div>

<div class="galleryItem">
<div class="fakeImage green">
<img src="images/9.jpg">
</div>
<div class="galleryOverlay">
<h2 class="galleryItemTitel">Roy Jacket</h2>
<p class="galleryItemIntro">Material: Cotton</p>
<p>Price: AUD $599.99</p>
<p>Sizes: XS S M L XL</p>
</div>
</div>

<div class="clear"></div>
</div>

您可以像下面这样使用：

var your_func = function(){
//wrap your gallery function here
};

//run your function
your_func();

//now you want to stop the function from running when resized
$(window).on('resize', function(){
  your_func = $.noop();
});

或者，如果您想确定屏幕大小，请执行以下操作：

if($(window).width() <= 1067){
  your_func = $.noop();
}

if（$（window）.width（）此代码查找设备类型。如果$.drowser.device不等于其中一个，请在代码中放入if语句，然后停止执行

  $.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

$（文档）.ready（函数（）{
$（窗口）。调整大小（函数（）{
如果（$（window）.width（）与您的窗口宽度问题有关，您可以使用此函数检测任何必要的窗口宽度（例如$（window）.on（'resize'）或$（document）.on（'ready'）：

var isLowerThan=函数（小于宽度）{
变量$window=$（window）；
返回（$window.width（）<小于宽度）；
}


你似乎对每一个设备类都有不同的看法，你应该考虑使用Basic。它有四个不同的视口宽度，你可以相应地调整你的标记。
如果你想那样，使用一个更好的正则表达式。
$(document).ready(function(){
   $(window).resize(function() {
      if ($(window).width() <= 320) {
         // Leave empty
      }
      else {
        $(".galleryItem").mouseenter(function() {
        var thisoverlay = $(this).find('.galleryOverlay');

        thisoverlay.stop(true, true).animate({
        height: '200',
        marginTop: '-220px'
        });
        });

        $(".galleryItem").mouseleave(function() {
         var thisoverlay = $(this).find('.galleryOverlay');

        thisoverlay.stop(true, true).animate({
          height: '30',
          marginTop: '-50px'
         });
        });
      }
   });
});

var isLowerThan = function(lower_than_width){
var $window = $(window);
return ($window.width() < lower_than_width);
}