jQuery (evento): ver el estilo elemento

Question

Digamos que tiene este elemento como el

<div class="watch-me" style="display: none;">Watch Me Please</div> 

como podemos ver el elemento anterior estilo es display: none, ¿cómo puedo hacer que la escritura para ver este elemento. cuando ese estilo de elemento cambie a display: block, se activará algún código.

muchas gracias ...

Answer 1

Por lo que yo sé, la única manera de hacer esto sería con un temporizador.

he creado un pequeño plugin jQuery (sí, aquí, en este momento) que hace esto en contra de un conjunto de jQuery:

EDITAR este plugin está ahora en GitHub: https://github.com/jacobrelkin/jquery-watcher

$.fn.watch = function(property, callback) { 
    return $(this).each(function() { 
     var self = this; 
     var old_property_val = this[property]; 
     var timer; 

     function watch() { 
      if($(self).data(property + '-watch-abort') == true) { 
      timer = clearInterval(timer); 
      $(self).data(property + '-watch-abort', null); 
      return; 
      } 

      if(self[property] != old_property_val) { 
      old_property_val = self[property]; 
      callback.call(self); 
      } 
     } 
     timer = setInterval(watch, 700); 
    }); 
}; 

$.fn.unwatch = function(property) { 
    return $(this).each(function() { 
     $(this).data(property + '-watch-abort', true); 
    }); 
}; 

Uso :

$('.watch-me').watch('style', function() { 
    //"this" in this scope will reference the object on which the property changed 
    if($(this).css('display') == 'block') { 
     //do something... 
    } 
}); 

Para borrar este observador propiedad:

$('.watch-me').unwatch('style'); 

Answer 2

Puesto que no se puede confiar en la DOM Mutation Events debido a ningún soporte para IE antes de las 9, yo creo se le requiere para configurar un temporizador de sondeo para ver. Por ejemplo:

var watched = $('.watch-me'); 
var lastDisplay = watched.css('display'); 

// Peek at the property about twice per second 
setInterval(function(){ 
    var curDisplay = watched.css('display'); 
    if (curDisplay!=lastDisplay){ 
    // Do what you want here. 
    lastDisplay = curDisplay; 
    } 
},500); 

Si desea cancelar la observación después de que se cambia una vez:

var watched = $('.watch-me'); 
var lastDisplay = watched.css('display'); 
var timer = setInterval(function(){ 
    if (watched.css('display')!=lastDisplay){ 
    // Do what you want here. 
    clearInterval(timer); 
    } 
},500); 

Answer 3

function startPolling() 
{ 
    var handle = window.setInterval(function(){ 

     var element = $(".watch-me"); 
     if (element.css("display") == "block") { 
      // trigger the event 
      window.clearInterval(handle); 
     } 

    }, 100); 
} 

cuando se quiere empezar a ver simplemente escriba:

startPolling(); 

Answer 4

Usted puede utilice la función object.watch, pero no es estándar, ya existe una implementación entre navegadores Object.watch() for all browsers?

$('.watch-me').get(0).watch('style', handlerFunction); 

Answer 5

Esto es altamente experimental (que han sido advertidos!) Y podría no ser un buen ajuste a su problema o responder a esta pregunta, pero se me ha ocurrido que puede hacer dos cosas:

1 - Anula el método .toggle del núcleo de jQuery para agregar algunos datos a los elementos a los que se aplica.

2 - enlazar un manejador de eventos changeData a los elementos, a partir de jQuery 1.4.4

Lo que esto significa es, puede hacer que algo suceda cada vez que un elemento se activar y desactivar. El mismo principio podría aplicarse a los métodos .hide y .show, o cualquier otro método para ese asunto.

// 1 - override .toggle() 
var original = jQuery.fn.toggle; 
jQuery.fn.toggle = function() { 
    console.log("Override method: toggle()"); 

    // call the original toggle 
    original.apply(this, arguments); 

    // record the element's visibility 
    $(this).data("visible", $(this).is(":visible")); 

    return this; 
}; 

// 2 - bind a changeData event handler to a 'watch list' 
$('div').bind("changeData", function() { 
    alert("Visibility changed to: " + $.data(this, 'visible')); 
}); 

<!-- exhaustive test markup --> 
<div id="test">Hello</div> 
<div id="test2" style="display:none">Hello 2</div> 

// go! 
$(document).ready(function() { 
    $("#test").toggle(); 
    $("#test2").toggle(); 
}); 

Pruébalo aquí: http://jsfiddle.net/karim79/nreqv/1/

Answer 6

escribí un plugin de jQuery para la observación de los cambios en DOM propiedades de los elementos/atributos y propiedades CSS que algunos podrían encontrar más intuitivo/más fácil de usar: jQuery.watch

Para lograr lo que busca, haría algo como esto:

$('.watch-me').watch({ 
    'display': function(oldVal, newVal, elm) { 
     if (newVal == 'block') { 
      // Do something 
     } 
    } 
}); 

El complemento también es compatible hacer un seguimiento de los valores de retorno de los métodos de jQuery en los elementos vigilados, por lo que podría, por ejemplo, iniciar una devolución de llamada cuando el valor de retorno de un método jQuery cambie cuando se llame a un elemento determinado.

Answer 7

Esto se puede considerar que no responde la pregunta, pero sería mejor utilizar los eventos personalizados de JQuery y el método .trigger que usar intervalos y mirar (que solo consume recursos).

Más concretamente, los elementos pueden suscribirse a nuevos eventos activados por objetos que están "vigilando".

Tome un vistazo aquí:

http://www.sitepoint.com/jquery-custom-events/

Answer 8

cheque https://developer.mozilla.org/en/docs/Web/API/MutationObserver

var target = _DOM_; 
var lastDisplayStyle = _DOM_.style.display; 
var observer = new MutationObserver(function (mutations) { 
    mutations.forEach(function (mutation) { 
     if (mutation.type === "attributes") { 
      if (lastDisplayStyle !== _DOM_.style.display){ 
       // your code there 
      } 
     } 
    }); 
}); 

var config = { attributes: true }; 
observer.observe(target, config); 

P. S. watch/unwatch están en desuso. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/watch ¡No use soluciones setInterval!