CODEWITHSUNDEEP
jqueryjquery-ui
Deadpool
Deadpool

Reputation: 8240

jQuery UI Blind Effect not Working

I have the following code in which I am trying to apply blind effect to a paragraph, but its not happening: 

<html>
   <head>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <script>
         $('#but1').click(function(){
            $('p').toggle('blind');
         });
      </script> 
   </head>
   <body>
      <button id="but1">Click Me!</button> 
      <p>This is a paragraph.</p>
   </body>
</html>

Can anyone point out what am I doing wrong?

Upvotes: 0

Views: 337

Answers (2)

Tushar
Tushar

Reputation: 87203

Wrap your code in ready.

In your code the click event is not bound, since the element #but1 is not available in the DOM when it is executed.

$(document).ready(function() {
    $('#but1').click(function() {
        $('p').toggle('blind');
    });
});

Upvotes: 1

jrath
jrath

Reputation: 990

Either use

$(document).ready(function() {
    $('#but1').click(function() {
        $('p').toggle('blind');
    });
});

or put your script at the end i.e. before 

<html>
   <head>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
   </head>
   <body>
      <button id="but1">Click Me!</button> 
      <p>This is a paragraph.</p>
      <script>
         $('#but1').click(function(){
             $('p').toggle('blind');

         });
      </script> 
   </body>
</html>

Upvotes: 3

Related Questions