Click here to Skip to main content
11,708,980 members (72,771 online)
Rate this: bad
good
Please Sign up or sign in to vote.
See more: jQuery functions
I have a menu with this html code and write a this function for menu but I hover a one menu, all menu is open Frown | :( I don't know what should I do and when I hover out all image is open and not closed.

<ul id="sdt_menu" class="sdt_menu">
    <li>
       <a href="#">
             <img src="../Static/Css/Images/2.jpg" alt="" />
               <span class="sdt_active"></span>
               <span class="sdt_wrap">
               <span class="sdt_link">About me</span>
               <span class="sdt_descr">Get to know me</span>
               </span>
       </a>
   </li>
   <li>
      <a href="#">
           <img src="../Static/Css/Images/1.jpg" alt="" />
             <span class="sdt_active"></span>
             <span class="sdt_wrap">
             <span class="sdt_link">Portfolio</span>
             <span class="sdt_descr">My work</span>
            </span>
      </a>
   </li>
 </ul>


$(function () {
          $.fn.extend({
              storemenu: function (options) {
                  var setting = {
 
                      height: 170,
                      width:170,
                      top: 0,
                      left: 0,
                      delay: 400,
                      duration: 500,
                      animateduration: 400,
                      easing: 'easeOutBack',
                      wrap: '.sdt_wrap',
                      active: '.sdt_active'
                  };
                  if (options != null) {
                      $.extend(setting, options);
                  }
                  var _elem = $(this);
                  /*Mouse Enter Method*/
 
                  mouseenter();
 

                  function mouseenter() {
                      _elem.bind('mouseenter', function () {
                          var elementindex = _elem.index(this);
                          var lastelementindex =_elem.last().index();
                          var scale = parseInt(_elem.css('width').replace("px", "") * (lastelementindex - elementindex));
                          _elem.find('img')
                          .stop(true)
                          .animate({
                              'width': setting.width + 'px',
                              'height': setting.height + 'px',
                              'left': setting.left + 'px'
                          }, setting.animateduration, setting.easing)
                          .andSelf()
                          .find(setting.wrap)
                          .stop(true)
                          .delay(setting.delay)
                          .animate({ 'top': '90px', 'left': elementindex * setting.width + 'px'}, setting.animateduration, setting.easing)
                          .andSelf()
                          .find(setting.active)
                          .stop(true)
                          .fadeIn(setting.duration)
                          .css('left', -scale);
                      });
                  }
 
                  mouseleave();
 
                  function mouseleave() {
                      _elem.bind('mouseleave', function () {
                          _elem.find(setting.active)
                          .stop(true)
                          .delay(400)
                          .fadeOut(50)
                          .andSelf()
                          .find('img')
                          .stop(true)
                          .animate({
                              'width': setting.width + 'px',
                              'height': setting.height + 'px',
                              'left': setting.left + 'px'
                          }, setting.animateduration)
                           .andSelf()
                           .find(setting.wrap)
                           .stop(true)
                           .animate({ 'top': setting.top + 'px', 'left': setting.left + 'px' }, setting.easing);
                      });
                  }
                  return this
              }//storemenu function
          });//$.fn.extend
      });//main function
Posted 13-Feb-13 21:31pm
Edited 13-Feb-13 21:39pm
v8

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 360
1 Maciej Los 235
2 Mika Wendelius 170
3 OriginalGriff 158
4 Peter Leow 139
0 OriginalGriff 9,348
1 Sergey Alexandrovich Kryukov 8,727
2 CPallini 5,189
3 Maciej Los 4,991
4 Mika Wendelius 3,856


Advertise | Privacy | Mobile
Web03 | 2.8.150819.1 | Last Updated 14 Feb 2013
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100