jquery - 当屏幕尺寸改变时如何停止这个 jQuery 运行？

Question

我使用 jQuery 制作了一个画廊，我希望它只适用于完整 View 。当浏览器更改为平板电脑或移动设备时，我希望 jQuery 画廊停止，我只希望画廊中的图像出现，2 个并排用于平板电脑，一个在彼此下方用于移动设备，而不是 4 个浏览器 View - 在图像之上，我想要产品的标题。

例子:

</* 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>

Answer 1

您可以使用 noop method如下所示:

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();
}