Click here to Skip to main content
11,477,007 members (72,011 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 22:31pm
Edited 13-Feb-13 22: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 274
1 Richard Deeming 245
2 _duDE_ 165
3 Tomas Takac 150
4 Sascha Lefèvre 145
0 Sergey Alexandrovich Kryukov 7,675
1 OriginalGriff 7,246
2 Sascha Lefèvre 3,034
3 Maciej Los 2,491
4 Richard Deeming 2,305


Advertise | Privacy | Mobile
Web01 | 2.8.150520.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