L'evento di trigger che utilizza Jquery su CSS cambia?

Question

Sono curioso che ci sia un listener di eventi o forse un modo per costruire un metodo che si innescherà quando si verifica un cambio di CSS?

Il mio foglio di stile utilizza le query multimediali e voglio sapere se c'è un modo per collegare un listener per vedere quando quelle query sui media entrano ed escono. Per esempio io ho una media query che nasconde un bottone in certi larghezze schermo

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

Cosa listener di eventi dovrei usare per rilevare quando quel display cambia? Attualmente sto facendo questo:

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

che funziona bene, ma chiama l'ascoltatore ogni volta che l'utente cambia lo schermo e preferirei appena averlo fuoco solo quando il css del pulsante cambia. Spero che abbia un senso.

ad esempio questo è quello che mi piacerebbe

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

Answer 1

Binding al window.resize è la scelta migliore (credo). Non è stato attivato alcun evento quando si modifica il CSS di un elemento. È tuttavia possibile ottimizzare un po 'mettendo in cache il selettore utilizzato:

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

Oppure è possibile utilizzare $(window).width() per controllare la larghezza della finestra:

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

UPDATE

Si può sempre strozzare il proprio gestore di eventi:

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

Ciò impedirà l'esecuzione del codice nel tuo gestore eventi resize più di una volta ogni tre secondi.

Answer 2

Se è solo un evento di una volta si potrebbe tentare di separare l'evento.

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

Answer 3

So che questo è vecchio, ma sono riuscito a risolvere con questa logica

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