jQuery - 在展開圖像菜單中將類添加到活動幻燈片中

Question

嗨我已經調整了本教程滑塊（http://tympanus.net/codrops/2011/03/16/expanding-image-menu/）以響應並且不使用圖像背景。我需要能夠根據是否展開來調整列表項的不透明度，但我正在努力尋找一種方法將活動類添加到擴展項。我想我應該通過使用.addClass來做到這一點，但我無法弄清楚在哪裏做這件事，以及它應該如何寫。任何指導非常感謝。 感謝 查理

 $(function() { 
      var $menu    = $('#ei_menu > ul'), 
       $menuItems   = $menu.children('li'), 
       $menuItemsImgWrapper= $menuItems.children('a'), 
       $menuItemsPreview = $menuItemsImgWrapper.children('.ei_preview'), 
       totalMenuItems  = $menuItems.length, 

       ExpandingMenu = (function(){ 
        /* 
         @current 
         set it to the index of the element you want to be opened by default, 
         or -1 if you want the menu to be closed initially 
        */ 
        var current    = 8, 

        /* 
         @anim 
         if we want the default opened item to animate initialy set this to true 
        */ 
        anim    = true, 
        /* 
         checks if the current value is valid - 
         between 0 and the number of items 
        */ 
        validCurrent  = function() { 
         return (current >= 0 && current < totalMenuItems); 
        }, 
        init    = function() { 
          /* show default item if current is set to a valid index */ 
         if(validCurrent()) 
          configureMenu(); 

         initEventsHandler(); 
        }, 
        configureMenu  = function() { 
          /* get the item for the current */ 
         var $item = $menuItems.eq(current); 
          /* if anim is true slide out the item */ 
         if(anim) 
          slideOutItem($item, true, 900, 'easeInQuint'); 


         else{ 
           /* if not just show it */ 
          $item.css({width : '60%'}) 
          .find('.ei_image') 
          .css({left:'0px', opacity:1}); 

          /* 

          .find('.ei_descr') 
          .css({display:'block'});/ 

           /* decrease the opacity of the others */ 
           $menuItems.not($item) 
              .children('.ei_preview') 
              .css({opacity:0.2}); 




         } 
        }, 
        initEventsHandler = function() { 
          /* 
          when we click an item the following can happen: 
          1) The item is already opened - close it! 
          2) The item is closed - open it! (if another one is opened, close it!) 
          */ 
         $menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) { 
          var $this = $(this).parent(), 
          idx  = $this.index(); 

          if(current === idx) { 
           slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true); 
           current = -1; 

          } 
          else{ 
           if(validCurrent() && current !== idx) 
             slideOutItem($menuItems.eq(current), false, 250, 'jswing'); 

           current = idx; 
            slideOutItem($this, true, 250, 'jswing'); 
          } 
          return false; 
         }); 
        }, 
         /* if you want to trigger the action to open a specific item */ 
         openItem   = function(idx) { 
          $menuItemsImgWrapper.eq(idx).click(); 
                  }, 
         /* 
         opens or closes an item 
         note that "mLeave" is just true when all the items close, 
         in which case we want that all of them get opacity 1 again. 
         "dir" tells us if we are opening or closing an item (true | false) 
         */ 
        slideOutItem  = function($item, dir, speed, easing, mLeave) { 
         var $ei_image = $item.find('.ei_image'), 

         itemParam = (dir) ? {width : '60%'} : {width : '5%'}, 
         imageParam = (dir) ? {left : '0px'} : {left : '5%'}; 

          /* 
          if opening, we animate the opacity of all the elements to 0.1. 
          this is to give focus on the opened item.. 
          */ 
         if(dir) 
         /* 
           alternative: 
           $menuItemsPreview.not($menuItemsPreview.eq(current)) 
               .stop() 
               .animate({opacity:0.1}, 500); 
         */ 
          $menuItemsPreview.stop() 
         .animate({opacity:0.1}, 1000); 
         else if(mLeave) 
          $menuItemsPreview.stop() 
         .animate({opacity:1}, 1500); 

          /* the <li> expands or collapses */ 
         $item.stop().animate(itemParam, speed, easing); 
          /* the image (color) slides in or out */ 
         $ei_image.stop().animate(imageParam, speed, easing, function() { 
           /* 
           if opening, we animate the opacity to 1, 
           otherwise we reset it. 
           */ 
          if(dir) 
           $ei_image.animate({opacity:1}, 2000); 
          else 
           $ei_image.css('opacity', 0.2); 
         }); 
        }; 

        return { 
         init  : init, 
         openItem : openItem 
        }; 
       })(); 

      /* 
      call the init method of ExpandingMenu 
      */ 
      ExpandingMenu.init(); 

      /* 
      if later on you want to open/close a specific item you could do it like so: 
      ExpandingMenu.openItem(3); // toggles item 3 (zero-based indexing) 
      */ 
     }); 

Answer 1

根據您發佈的代碼（我have'nt閱讀文章），這是slideOutItem，放大或隱藏的元素的功能。

// ... 

    /* 
     if opening, we animate the opacity to 1, 
     otherwise we reset it. 
    */ 
    if(dir) 
    { 
     $ei_image.animate({opacity:1}, 2000); 

     // Add .active 
     $ei_image.addClass('active'); 
    } 
    else 
    { 
     $ei_image.css('opacity', 0.2); 

     // Remove .active 
     $ei_image.removeClass('active'); 
    } 

    // ...