title: jquery function not working in mozila firefox, but working in google chrome
body: <p>i want to blur the content of div, and this function is working properly in google chrome but not in mozila firefox,</p>
  
  <p>this is my code,</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;title&gt;How to create blur effect with jQuery and CSS&lt;/title&gt;
  
  &lt;style&gt;
      body{
          text-align: center;
      }
  
      input{
          margin-top:20px;
          font-size:16px;
          font-weight: bold;
          padding:5px 10px;
      }
  
      #box{
          margin:50px auto;
          width:500px;
          height:100px;
          color:#fff;
          padding:10px;
          background: #333;
      }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;input type="button" value="Blur Box" class="button"  /&gt;
  &lt;input type="button" value="Reset Box" class="button2"  /&gt;
  
  &lt;div id="box"&gt;We use Google's CDN to serve the jQuery js libs. 
      To speed up the page load we put these scripts at the bottom of the page &lt;/div&gt;
  
  &lt;!-- 
      We use Google's CDN to serve the jQuery js libs. 
      To speed up the page load we put these scripts at the bottom of the page 
  --&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
      //DOM loaded 
      $(document).ready(function() {
  
          //attach click event to button
          $('.button').click(function(){
  
              //when button is clicked we call blurElement function
              blurElement("#box", 2);
  
          });
  
          //attach click event to button
          $('.button2').click(function(){
  
              //set box blur to 0
              blurElement("#box", 0);
  
          });
  
  
      });
  
      //set the css3 blur to an element
      function blurElement(element, size){
          var filterVal = 'blur('+size+'px)';
          $(element)
            .css('filter',filterVal)
            .css('webkitFilter',filterVal)
            .css('mozFilter',filterVal)
            .css('oFilter',filterVal)
            .css('msFilter',filterVal);
      }
  
  
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Please help me that how to run this code in all browsers (specially mozilla firefox, IE 9+)
  Thanks in advance.</p>