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 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 
<head>
  <link rel="stylesheet" href="http://cu3ed.com/jqfade/css/style.css" type="text/css" media="screen" /> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
​
​
</head> 
 
<body> 
  <div id="nav"> 
    <ul> 
      <li class="top"><a href="#" class="fade">Our Sponsors</a></li> 
      <li><a href="#" class="fade">Latest News</a></li> 
      <li><a href="#" class="fade">Testimonials</a></li> 
      <li><a href="#" class="fade">Twitter</a></li> 
      <li class="bottom"><a href="#" class="fade">Facebook</a></li> 
    </ul> 
  </div> 
</body> 
</html>
 
$(document).ready(function() {
  
/*  $(".plus").css("opacity", "0.5"); */
  $(".fade").each( function() {
    $(this).append($("<img style='float:right;' src='http://cu3ed.com/jqfade/img/plus.png' />"));
    $(this).find("img:last").hide();
  });
      
  
  $(".fade").hover(
    function () {
      var me = $(this);
      
      
      me.find("img:last").fadeIn(500);
      
      me.animate({
        opacity: 1,
        borderBottomColor: "#6BD8FF",
        borderLeftColor: "#6BD8FF",
        borderRightColor: "#6BD8FF",
        borderTopColor: "#6BD8FF",
        color: "#03A5DF",
        backgroundColor: "#E3F8FF"
      }, 500);
    },
    function () {
      var me = $(this);
      me.stop();
      me.find("img:last").fadeOut(200);
      me.animate({
        opacity: 1,
        borderBottomColor: "#CCCCCC",
        borderLeftColor: "#CCCCCC",
        borderRightColor: "#CCCCCC",
        borderTopColor: "#CCCCCC",
        color: "#BBBBBB",
        backgroundColor: "#F9F9F9"
      }, 200);
    }
  );
  
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers