1
我正在使用jQuery來添加一些頁面轉換時的某些元素(通過jQuery Transit插件),當它被徘徊時。由於我試圖設計響應,我希望這些轉換隻發生在瀏覽器達到一定規模或更大時。爲什麼我的jQuery沒有響應窗口大小調整?
我寫了下面的代碼作爲一種嘗試做到這一點:
$(document).ready(function(){
var $window = $(window);
var $logo = $('.logo');
function checkWidth() {
windowsize = $window.width();
}
checkWidth();
$(window).resize(checkWidth);
if (windowsize >= 768) {
$logo.hoverIntent(
function(){
$logo.transition({
perspective: '600px',
rotateY: '-10deg'
});
},
function(){
$logo.transition({
perspective: '600px',
rotateY: '0deg'
});
}
);
}
});
如果我加載頁面在一個大的瀏覽器,它按預期工作 - 懸停效果是積極的。如果我調整瀏覽器的大小,使其更小(超過斷點)並刷新,則它可以工作 - 懸停效果將被禁用。但是如果我調整窗口的大小而不刷新其間,則效果不響應 - 它要麼保持禁用狀態(如果從小屏幕調整到大屏幕),要麼保持活動狀態(如果從大到小調整大小)。
這是一個小小的怪癖,當然,但我不能確切地弄清楚爲什麼會發生。據我所知,當窗口調整大小時,應該正在更新windowsize
變量,應在語句中檢查。我忽略了什麼使得情況並非如此?
謝謝你一堆。
感謝您的快速響應! 我嘗試使用您提供的代碼。現在,如果我在小瀏覽器中加載頁面,則不存在懸停效果,如果我在不刷新的情況下使瀏覽器變大,則會出現懸停效果。這很好!但是,從大到小不會禁用懸停效果。我錯過了明顯的東西嗎? – SpencerDub
這將是因爲(**驚喜!**),當窗口大小<768時,代碼不會禁用懸停效果。您必須添加代碼才能執行此操作。 –
啊,呃。數字我會忽略這樣簡單的事情。謝謝! – SpencerDub