सीएसएस परिवर्तन पर Jquery का उपयोग कर ट्रिगर घटना?

Question

मुझे उत्सुकता है कि कोई ईवेंट श्रोता या शायद एक तरीका बनाने का एक तरीका है जो एक सीएसएस परिवर्तन होता है जब ट्रिगर होगा?

मेरी स्टाइलशीट मीडिया प्रश्नों का उपयोग करती है और मैं जानना चाहता हूं कि श्रोता को संलग्न करने का कोई तरीका है या नहीं, यह देखने के लिए कि उन मीडिया प्रश्नों को कब और बाहर लाया जाए। उदाहरण के लिए मैं एक मीडिया क्वेरी कि कुछ स्क्रीन चौड़ाई

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

कौन सा ठीक काम करता है, लेकिन यह श्रोता हर बार उपयोगकर्ता स्क्रीन में परिवर्तन कॉल करता है और मैं नहीं बल्कि सिर्फ यह आग है चाहते हैं केवल जब बटन परिवर्तन के सीएसएस। मुझे उम्मीद है कि इसका कोई अर्थ है।

उदाहरण के लिए इस मैं चाहूँगा

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

Answer 1

window.resize लिए बाइंडिंग आपका सबसे अच्छा विकल्प (मेरा मानना ​​है कि) है। जब आप तत्व का सीएसएस बदलते हैं तो कोई घटना नहीं निकालती है। आप फिर भी चयनकर्ता इस्तेमाल किया कैशिंग द्वारा एक सा अनुकूलन कर सकते हैं:

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

अद्यतन

तुम हमेशा थ्रॉटल कर सकते हैं आपका खुद का इवेंट हैंडलर:

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

क्या यदि यह केवल एक बार घटना आप घटना निकल की कोशिश कर सकते है।

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

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