jQuery image menu (Cool Slide)

hello all i want to ask ^^

how to solved this tutorial?
i like this slide because very smooth
http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/create_image_menu_with_jquery.html



demo:
http://www.alohatechsupport.net/examples/image-menu-1.html

i done try, but i don understand in step 3-4 about jquery,
I am confused what to put it where the code. I've tried and always failed

can you explain again this tutorial??

please help me :

thanks before ^_^

BUMP!!

please someone help me

thanks before

Here it is:

Code:

<script type="text/javascript" src="http://www.alohatechsupport.net/js/jquery.js"></script>
<script type="text/javascript" src="http://www.alohatechsupport.net/js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="http://www.alohatechsupport.net/js/jquery-easing-compatibility.1.2.pack.js"></script>

<script type="text/javascript">
jQuery(document).ready(function () {
  // find the elements to be eased and hook the hover event
  jQuery('div.jimgMenu ul li a').hover(function() { 
    // if the element is currently being animated
    if (jQuery(this).is(':animated')) {
      jQuery(this).addClass("active").stop().animate({width: "310px"}, {duration: 450, easing: "easeOutQuad", complete: "callback"});
    } else {
      // ease in quickly
      jQuery(this).addClass("active").stop().animate({width: "310px"}, {duration: 400, easing: "easeOutQuad", complete: "callback"});
    }
  }, function () {
    // on hovering out, ease the element out
    if (jQuery(this).is(':animated')) {
      jQuery(this).removeClass("active").stop().animate({width: "78px"}, {duration: 400, easing: "easeInOutQuad", complete: "callback"})
    } else {
      // ease out slowly
      jQuery(this).removeClass("active").stop(':animated').animate({width: "78px"}, {duration: 450, easing: "easeInOutQuad", complete: "callback"});
    }
  });
});
</script>

<style>

.jimgMenu {
  position: relative;
  width: 670px;
  height: 200px;
  overflow: hidden;
  margin: 25px 0px 0px;
}

.jimgMenu ul {
  list-style: none;
  margin: 0px;
  display: block;
  height: 200px;
  width: 1340px;
 
  }

.jimgMenu ul li {
  float: left;
}

.jimgMenu ul li a {
  text-indent: -1000px;
  background:#FFFFFF none repeat scroll 0%;
  border-right: 2px solid #fff;
  cursor:pointer;
  display:block;
  overflow:hidden;
  width:78px;
  height: 200px;
}

.jimgMenu ul li.slide-one a {
  background: url(http://www.alohatechsupport.net/CSSFiles/images/landscapes.jpg) repeat scroll 0%;
}

.jimgMenu ul li.slide-two a {
  background: url(http://www.alohatechsupport.net/CSSFiles/images/people.jpg) repeat scroll 0%;
}

.jimgMenu ul li.slide-three a {
  background: url(http://www.alohatechsupport.net/CSSFiles/images/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li.slide-four a {
  background: url(http://www.alohatechsupport.net/CSSFiles/images/abstract.jpg) repeat scroll 0%;
}

.jimgMenu ul li.slide-five a {
  background: url(http://www.alohatechsupport.net/CSSFiles/images/urban.jpg) repeat scroll 0%;
  min-width:310px;
 
}

.clear {
  clear: both;
}
</style>

<div class="jimgMenu">
  <ul>
    <li class="slide-one"><a href="#">Hello!</a></li>
    <li class="slide-two"><a href="#">Forumotion</a></li>
    <li class="slide-three"><a href="#">Coding</a></li>
    <li class="slide-four"><a href="#">Support</a></li>
    <li class="slide-five"><a href="#">Mark</a></li>
  </ul>
</div>

Yeah It Works Again You Nailed It

now work 100% ^_^

thanks mr.mark problem solved

you very amazing about coding
and never stingy to give a solution ^_^

thanks before