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>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
   $(document).ready(function(){ 
     
     //jQuery mouseover function
       $("p#hovercolor").mouseover(function(){
        $("p#hovercolor").css("background-color","yellow");
       });
     
     //jQuery mouseout function
      $("p#hovercolor").mouseout(function(){
        $("p#hovercolor").css("background-color","green");
      });
     
     //jQuery click function
    $('input[name="Colorbtn"]').click(function(){
        $('.myBox').css('background', '#00aeef');
        $('.myBox').css('color', '#fff');
     });
     
     $('input[name="discolorbtn"]').click(function(){
        $('.myBox').css('background', '#fff');
        $('.myBox').css('color', '#000');
     });
     
     //Hide the matched elements with a sliding motion.
     $('p.sliderhider').click(function(){
       $(this).slideUp({'complete': function() {
           $(this).slideDown();
         }
       });
     });
     
     
  });    
​
</script>
</head>
<body>
​
  <p id="hovercolor">Move the mouse pointer over this paragraph.</p>
  
  <div class="myBox" style="border:1px solid blue; width:150px; height:150px; margin-bottom:20px;">
    BOX 1
  </div>
  
  <input type="button" value="Color myBox" name="Colorbtn"/>
  <input type="button" value="Dis-Color myBox" name="discolorbtn"/><br /><br />
  <hr>
  <p class="sliderhider" style="display:block; background: yellow; width:200px">Slide this up one at a time</p>
  <p class="sliderhider" style="display:block; background: yellow; width:200px">Slide this up one at a time</p>
  <p class="sliderhider" style="display:block; background: yellow; width:200px">Slide this up one at a time</p>
 
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers