Perché il mio cursore di dissolvenza JQuery non funziona su qualsiasi tipo di IE?

Question

Il mio cursore JQuery non funziona in IE (in qualsiasi modalità documento). Come potrei risolvere questo? Il mio codice fa scorrere un div di testo dopo che un pulsante è stato premuto (anche esso si attenua piacevolmente). La console di IE mi dà questo errore: "Object doesn't support property or method 'fadingSlideToggle'".

(function ($) { 
    $.fn.fadingSlideToggle = function ($el, options) { 
     var defaults = { 
      duration: 500, 
      easing: 'swing', 
      trigger: 'click' 
     }; 

     var settings = $.extend({}, defaults, options) 
     $selector = $(this).selector; 

     return this.each(function() { 
      var $this = $(this); 

      $(document).on(settings.trigger, $selector, function (e) { 
       e.preventDefault(); 
       if ($($el).css('display') == 'none') { 
        $($el).animate({ 
         opacity: 'toggle', 
         height: 'toggle' 
        }, settings.duration, settings.easing); 
       } else { 
        $($el).animate({ 
         opacity: 'toggle', 
         height: 'toggle' 
        }, settings.duration, settings.easing); 
       } 
      }); 
     }); 
    }; 
})(jQuery); 

Mi chiedo quale parte non è supportato, e come risolvere il problema. Grazie mille!

EDIT: Ecco il codice in cui io chiamo la funzione (che funziona su Firefox e Chrome):

<button class="btn-custom btn-lg"" id="clickedEl"><span>Why rate/review websites?</span>  </button></br> 
<nav role="navigation" id="toggleEl">/*non relevant html*/</nav> 

Il resto della javascript:

$(function(){ 
    $('#clickedEl').fadingSlideToggle('#toggleEl'); 
    }); 

Il JSFiddle che non lo fa lavoro in IE: http://jsfiddle.net/3ymvv

Answer 1

Il problema sembra provenire da jQuery 1.10.1 (#13936#13980).Ecco l'errore che abbiamo ottenuto:

Access Denied - jQuery-1.10.1.js, line : 1513, column : 2

E le corrispondenti linee:

// Support: IE>8 
// If iframe document is assigned to "document" variable and if iframe has been reloaded, 
// IE will throw "permission denied" error when accessing "document" variable, see jQuery #13936 
if (parent && parent.frameElement) { // :1513 
    parent.attachEvent("onbeforeunload", function() { 
     setDocument(); 
    }); 
} 

Questo accade presto, e possibilmente prevenire lo script da caricare.

Aggiornare jQuery alla versione 1.11.0 (o successiva) e you'll see it works.

Answer 2

Qui chiaramente non sappiamo dove potrebbe essere il problema.

1. Il tuo codice sembra buono.
2. prego ci mostra il codice in cui si utilizza il plugin
3. Lì dove si utilizza il plug-in, controllare se il plugin è definito console.log($.fn.fadingSlideToggle)
4. verifica che l'oggetto si sta chiamando il plugin su è in realtà un oggetto jQuery valida. console.log(obj instanceof jQuery) o (!!obj.jquery && typeof obj.jquery === "string")

un oggetto jQuery ha prenotiamo una proprietà chiamata jquery con la versione corrente jQuery in esso. Inoltre, l'oggetto jQuery è solitamente un'istanza dell'oggetto jQuery stesso. Ma tenere a mente, è possibile che l'uso di .noconflict() non v'è alcuna variabile globale jQuery o $

Answer 3

Quando stavo testando in Windows XP, IE8 e una vecchia versione di Firefox esibito lo stesso comportamento (improvvisamente appaiono quando #clickeEl prima cliccato) . La rimozione dell'elemento <nav> e l'utilizzo dell'elemento <ul> sembravano risolvere il problema. Poi ho capito che il problema era il tag <nav> che è sconosciuto a ie8 e firefox. Come descritto in this article, i browser non sanno che <nav> è un elemento di blocco. Quindi aggiungendo

nav { display:block } 

risolto il problema su ie8 in windows xp.

Demo

In realtà, non so come questo è compatibile, ma sembra che il plug-in sta facendo un po 'di cose inutili, dal momento che è utilizzando jQuery. Quindi l'ho aggiunto un po 'di seguito. (Per lo più mi dava fastidio è necessario impostare display:none in CSS con un ID al posto del plugin stesso.

Proposed Changes

Answer 4

Il problema è il caricamento di jQuery nel violino. Basta caricare jQuery da un CDN e quindi avviare il plugin.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
    // your plugin 
</script> 

Ora funziona perfettamente con IE 8+.

Answer 5

Avete per caso un elemento html con l'ID di fadingSlideToggle? Questo potrebbe essere il problema come spiegato qui: https://stackoverflow.com/a/14003088/561957