在CSS更改時使用Jquery觸發事件？

Question

我很好奇是否有一個事件監聽器或者一種方法來構造一個在CSS發生變化時會觸發的方法？

我的樣式表使用媒體查詢，我想知道是否有一種方法可以附加一個監聽器，以查看這些媒體查詢何時啟動和退出。 例如，我有一個媒體查詢，隱藏某個屏幕寬度的按鈕

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

Answer 1

綁定到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事件處理程序中的代碼每四分之一運行一次以上。

Answer 2

我知道這是舊的，但我設法用這個邏輯來解決它

    // 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
            // ...
        }
    });

Answer 3

如果它只是一次性事件，您可以嘗試解除綁定事件。

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