Zdarzenie wyzwalające przy użyciu Jquery przy zmianie CSS?

Question

Ciekaw jestem, czy istnieje odbiornik zdarzeń, czy może sposób konstruowania metody, która będzie wyzwalać, gdy nastąpi zmiana CSS?

Mój arkusz stylów korzysta z zapytań o media i chcę wiedzieć, czy istnieje sposób na dołączenie detektora, aby zobaczyć, kiedy zapytania o media pojawiają się i znikają. Na przykład mam zapytanie multimedialny, który ukrywa przycisk w pewnych szerokościach ekranem

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

Jakie wydarzenie słuchacz chciałbym użyć do wykrywania kiedy ten wyświetlacz zmienia? Jestem obecnie to robi:

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

który działa dobrze, ale wywołuje słuchaczowi każdym razem, gdy użytkownik zmieni ekran i wolałbym po prostu go zwolnić tylko wtedy, gdy css zmian przycisków. Mam nadzieję, że ma to sens.

na przykład to, co chciałbym

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

Answer 1

Wiązanie z window.resize jest najlepszym rozwiązaniem (wierzę). Nie ma żadnego zdarzenia wystrzelonego po zmianie CSS elementu. Można jednak zoptymalizować trochę poprzez buforowanie selektor używany:

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

Albo można użyć $(window).width() sprawdzić szerokość rzutni:

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

UPDATE

zawsze można udusić własny program obsługi zdarzeń:

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

Uniemożliwi to uruchamianie kodu w twojej procedurze obsługi zdarzeń resize więcej niż raz na kwartał drugi.

Answer 2

Jeśli jest to tylko wydarzenie raz można spróbować rozwiązać zdarzenia.

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

Answer 3

wiem, że to jest stary, ale udało mi się go rozwiązać z tą logiką

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