Событие триггера с использованием JQuery для изменения CSS?

Мне любопытно, есть ли прослушиватель событий или, возможно, способ построить метод, который будет срабатывать при изменении 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');
});

Ответы

Ответ 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 более одного раза в секунду.

Ответ 2

Если это одноразовый случай, вы можете попытаться отвязать событие.

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

Ответ 3

Я знаю, что это старо, но мне удалось решить эту проблему с помощью этой логики

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