Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  
  
   <style>
      #fadeMe { 
     width:100px;
  height:100px; 
  background-color:#F30; color:#FFF; 
  text-align:center; 
  font-size:30px;
  display:none;overflow:
    hidden;
  white-space: nowrap;
  float:right;
  top:30px;
    }
      </style>
  
</head>
  
  
  <body>
   
    
    
    
     <button class="open">open</button><br>
      
     
      
    <div id="fadeMe">fade me! kjh</div>
      
   
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script>
    jQuery.fn.fadeToggle = function(speed, easing, callback)
    {
      return this.animate({opacity: 'toggle'}, speed, easing, callback);  
    };    
    
    $(document).ready(function() {
      $('.open').click(function() {
        var el = $('#fadeMe').next();
        if ( el.is(':animated') ) {
            $(el).fadeToggle('slow');
        }
      });
    });
      
      
      $( ".open" ).toggle(
  function() {
    $( this ).addClass( "selected" );
  }, function() {
    $( this ).removeClass( "selected" );
  }
);
    </script>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
  </body>
    
</html>
 
​
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers