在CSS上使用jquery觸發事件？

我很好奇，有沒有一個事件監聽器，或者可能是一種方法來構建一個方法，當CSS更改發生時會觸發？在CSS上使用jquery觸發事件？

我的樣式表使用媒體查詢，我想知道是否有附加偵聽器的方法來查看這些媒體查詢何時進出。比如我有一個媒體查詢，在某些屏幕寬度

@media screen and (max-width: 480px) { 
    #search-button { 
    display: none; 
    } 
}

我會用什麼事件監聽器檢測時顯示變化隱藏的按鈕？目前，我正在這樣做：

$(window).resize(function() { 
    if($('#search-button').css("display") == "none") { 
    //do something 
    } else { 
    //do something else 
    } 
});

，工作正常，但每次用戶改變屏幕時，它調用監聽器，我寧願只是有它火只有當該鍵可以改變CSS。我希望這是有道理的。

例如這是想

$('#search-button').cssEventListenerOfSomeKind(function() { 
    alert('the display changed'); 
});

來源

2011-12-29 Brodie

stackoverflow.com/questions/1397251/event-detect-when-css-property-changed-using-jquery – xyz 2011-12-29 17:37:22

結合window.resize是最好的選擇（我相信）。當您更改元素的CSS時，不會觸發任何事件。但是，您可以通過緩存使用的選擇優化了一下：

var $searcButton = $('#search-button'); 
$(window).resize(function() { 
    if($searcButton.css("display") == "none") { 
     //do something 
    } else { 
     //do something else 
    } 
});

或者您可以使用$(window).width()檢查視口的寬度：

var $window = $(window); 
$window.resize(function() { 
    if($window.width() <= 480) { 
     //do something 
    } else { 
     //do something else 
    } 
});

UPDATE

您可以隨時掐死您自己的事件處理程序：

var $window = $(window), 
    resize_ok = true, 
    timer; 

timer = setInterval(function() { 
    resize_ok = true; 
}, 250); 

$window.resize(function() { 
    if (resize_ok === true) { 
     resize_ok = false; 
     if($window.width() <= 480) { 
      //do something 
     } else { 
      //do something else 
     } 
    } 
});

這將防止resize事件處理程序中的代碼每隔四分鐘運行一次以上。

來源

2011-12-29 17:28:53 Jasper

我也這麼認爲......我想我不喜歡resize函數被解僱這麼多次的想法。但是，如果它是最好的/唯一的方法來實現這一目標，那麼最好嗎？如果沒有人會很快找到替代品，我會接受這個答案。 – Brodie 2011-12-29 17:32:12

@Brodie檢查我的**更新**，如果您調整'resize'事件處理程序，您可以減少用戶調整其瀏覽器時的CPU開銷。 – Jasper 2011-12-29 17:34:58

@Ajinkya你刪除了你的文章，但我認爲這是一個有用的鏈接（它可能不是很好的支持瀏覽器，但它仍然是很好的信息）：http://stackoverflow.com/questions/1397251/event-detect-when-css - 特性改變的-使用-jquery的 – Jasper 2011-12-29 17:41:27

什麼，我如果只是一次性事件，你可以嘗試取消綁定事件。

http://api.jquery.com/unbind/

來源

2011-12-29 17:25:40

如何解決呢這適用於這個問題？ – Jasper 2011-12-29 17:35:45

從這個「哪些工作正常，但每次用戶更改屏幕時都會調用監聽器，我寧願只在按鈕的css更改時才觸發它」。聽起來像你的問題是事件再次發生。也許我錯過了理解，但如果你不想讓事件繼續發射它，你可以嘗試解開事件並重新綁定它。 – 2011-12-29 18:17:48

我知道這是舊的，但我設法與這個邏輯

// set width and height of element that is controlled by the media query 
    var page_width = $page.width(); 
    var page_height = $page.height(); 


    $window = $(window).resize(function(){ 
     if($page.width() != page_width) { 
      // update page_width and height so it only executes your 
      // function when a change occurs 
      page_width = $page.width(); 
      page_height = $page.height(); 
      // do something 
      // ... 
     } 
    });

來源

2012-04-20 19:06:35 lemonSkip

在CSS上使用jquery觸發事件？

回答

相關問題