如何在屏幕大小發生變化時停止運行jQuery？

Question

我做了一個使用jQuery的畫廊，我希望這隻能在全視圖上工作。當瀏覽器更改爲平板電腦或移動設備時，我希望jQuery圖庫停止播放，並且我只希望圖庫中的圖像出現，其中平板電腦的尺寸爲2，移動設備的尺寸爲2，移動設備的尺寸爲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> 

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

Answer 2

此代碼查找設備類型。在你的代碼中放入一條If語句，如果$ .drowser.device不等於其中一個就停止執行。

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

Answer 3

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

Answer 4

關於你的窗口寬度的問題，你可以使用這個功能來檢測窗口寬度wehnever必要（例如$（窗口）。在（「調整」）或$（文件）。在（ 「準備好」））：

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

Demo

你似乎是有意爲每個設備類不同的看法，你也許應該考慮使用基本grid system provided by Bootstrap framework。它帶有四種不同的視口寬度，您可以相應地調整標記。