Evento desencadenante usando Jquery en cambio CSS?

Question

Tengo curiosidad por saber si hay un oyente de eventos o quizás una forma de construir un método que se active cuando ocurra un cambio de CSS.

Mi hoja de estilo utiliza consultas de medios y deseo saber si hay una forma de adjuntar un oyente para ver cuándo entran y salen esas consultas de medios. Por ejemplo, tengo una consulta de medios que esconde un botón en determinados anchos de pantalla

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

Lo detector de eventos debería utilizar para detectar cuando esa pantalla cambia? Actualmente estoy haciendo esto:

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

que funciona muy bien, pero requiere que el oyente cada vez que el usuario cambia la pantalla y yo prefiero tenerlo disparar sólo cuando el css del botón cambia. Espero que tenga sentido.

por ejemplo, esto es lo que me gustaría

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

Answer 1

La unión al window.resize es su mejor opción (creo). No hay ningún evento disparado cuando cambia el CSS de un elemento. Sin embargo, puede optimizar un poco a almacenamiento en caché el selector utilizado:

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

O puede utilizar $(window).width() para comprobar el ancho de la ventana gráfica:

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

ACTUALIZACIÓN

Siempre se puede estrangular su propio manejador de eventos:

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

Esto evitará que el código en su controlador de eventos resize se ejecute más de una vez cada cuarto de segundo.

Answer 2

Si es sólo un evento de una sola vez que se podría tratar de desvincular el evento.

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

Answer 3

Sé que esto es viejo, pero me las arreglé para solucionarlo con esta lógica

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