Slide in div切換不起作用

Question

我現在有一個幻燈片div，當點擊類「關閉按鈕」時從右側滑入。

我遇到的問題是，當切換點擊時，div滑入，然後再次自動滑出。

我想單擊切換啓動div中的幻燈片，然後再次單擊關閉它。

它似乎工作正常，如果我點擊div的實際句柄（.handle），但。

請讓我知道如果你需要更多的信息。

網址：http://www.bboyrival.com/

標記：

<nav id="extra-links"> 
    <a class="close-button">&#47;&#47; PROFILE INFO</a> 
    <a class="video-gallery">&#47;&#47; VIDEOS</a> 
</nav> 


<div class="slide-out-div"> 
    <a class="handle" href="http://www.bboyrival.com/index.html">Content</a> 
    <div id="slide-in-left"> 
    <img id="profile-img" src="images/profilepic.jpg" width="160" height="212"></div> 
    <div id="slide-in-right"> 
    <h2>&#47;&#47;&#160;PROFILE INFO</h2> 
    <ul id="profile"> 
    <li>RACE &#160; >> &#160; Caucasion</li> 
    <li>HAIR COLOUR &#160; >> &#160; BLONDE</li> 
    <li>HEIGHT &#160; >> &#160; 6.2FT</li> 
    <li>WAIST &#160; >> &#160; 32''</li> 
    </ul> 
    </div> 
</div> 

JQuery的：

(function($){ 
    $.fn.tabSlideOut = function(callerSettings) { 
     var settings = $.extend({ 
      tabHandle: '.handle', 
      speed: 500, 
      action: 'click', 
      tabLocation: 'right', 
      topPos: '180px', 
      fixedPosition: false, 
      positioning: 'absolute', 
      pathToTabImage: null, 
      imageHeight: null, 
      imageWidth: null, 
      onLoadSlideOut: false, 
      afterOpen: function(){console.log('afteropen');}      
     }, callerSettings||{}); 

     settings.tabHandle = $(settings.tabHandle); 
     var obj = this; 


     if (settings.fixedPosition === true) { 
      settings.positioning = 'fixed'; 
     } else { 
      settings.positioning = 'absolute'; 
     } 

     //ie6 doesn't do well with the fixed option 
     if (document.all && !window.opera && !window.XMLHttpRequest) { 
      settings.positioning = 'absolute'; 
     } 



     //set initial tabHandle css 

     if (settings.pathToTabImage != null) { 
      settings.tabHandle.css({ 
      'background' : 'url('+settings.pathToTabImage+') no-repeat', 
      'width' : settings.imageWidth, 
      'height': settings.imageHeight 
      }); 
     }else{ // DDC Settings 
      settings.tabHandle.css({ 
      'width' : settings.imageWidth, 
      'height': settings.imageHeight 
      }); // end DDC Settings 
     } 

     settings.tabHandle.css({ 
      'display': 'block', 
      'textIndent' : '-99999px', 
      'outline' : 'none', 
      'position' : 'absolute' 
     }); 

     obj.css({ 
      'line-height' : '1', 
      'position' : settings.positioning 
     }); 


     var properties = { 
        containerWidth: parseInt(obj.outerWidth(), 10) + 'px', 
        containerHeight: parseInt(obj.outerHeight(), 10) + 'px', 
        tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px', 
        tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px' 
       }; 

     //set calculated css 
     if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') { 
      obj.css({'left' : settings.leftPos}); 
      settings.tabHandle.css({'right' : 0}); 
     } 

     if(settings.tabLocation === 'top') { 
      obj.css({'top' : '-' + properties.containerHeight}); 
      settings.tabHandle.css({'bottom' : '-' + properties.tabHeight}); 
     } 

     if(settings.tabLocation === 'bottom') { 
      obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'}); 
      settings.tabHandle.css({'top' : '-' + properties.tabHeight}); 

     } 

     if(settings.tabLocation === 'left' || settings.tabLocation === 'right') { 
      obj.css({ 
       'height' : properties.containerHeight, 
       'top' : settings.topPos 
      }); 

      settings.tabHandle.css({'top' : 0}); 
     } 

     if(settings.tabLocation === 'left') { 
      obj.css({ 'left': '-' + properties.containerWidth}); 
      settings.tabHandle.css({'right' : '-' + properties.tabWidth}); 
     } 

     if(settings.tabLocation === 'right') { 
      obj.css({ 'right': '-' + properties.containerWidth}); 
      settings.tabHandle.css({'left' : '-' + properties.tabWidth}); 

      $('html').css('overflow-x', 'hidden'); 
     } 

     //functions for animation events 

     settings.tabHandle.click(function(event){ 
      event.preventDefault(); 
     }); 

     var slideIn = function(i) { 

      if (settings.tabLocation === 'top') { 
       obj.eq(i).animate({top:'-' + properties.containerHeight}, settings.speed).removeClass('open'); 
      } else if (settings.tabLocation === 'left') { 
       obj.eq(i).animate({left: '-' + properties.containerWidth}, settings.speed).removeClass('open'); 
      } else if (settings.tabLocation === 'right') { 
       obj.eq(i).animate({right: '-' + properties.containerWidth}, settings.speed).removeClass('open'); 
      } else if (settings.tabLocation === 'bottom') { 
       obj.eq(i).animate({bottom: '-' + properties.containerHeight}, settings.speed).removeClass('open'); 
      }  

     }; 

     var slideOut = function(i) { 
      if (settings.tabLocation == 'top') { 
       obj.eq(i).animate({top:'-3px'}, settings.speed).addClass('open'); 
      } else if (settings.tabLocation == 'left') { 
       obj.eq(i).animate({left:'-3px'}, settings.speed).addClass('open'); 
      } else if (settings.tabLocation == 'right') { 
       obj.eq(i).animate({right:'-3px'}, settings.speed).addClass('open'); 
      } else if (settings.tabLocation == 'bottom') { 
       obj.eq(i).animate({bottom:'-3px'}, settings.speed).addClass('open'); 
      } 
     }; 

     var clickScreenToClose = function() { 
      obj.click(function(event){ 
       event.stopPropagation(); 
      }); 


       $(document).click(function(){ 
        obj.each(function(i){ 

        slideIn(i); 
       }); 
      }); 

     }; 

     var clickAction = function(){ 

      settings.tabHandle.each(function(i){ 

       $(this).click(function(){ 


        if (obj.eq(i).hasClass('open')) { 
         slideIn(i); 
        } else { 
         obj.each(function(x){ 
          slideIn(x); 
         }); 
         slideOut(i);       
        } 

       }) 



      }); 

      clickScreenToClose(); 
     }; 

     var hoverAction = function(){ 
      obj.hover(
       function(){ 
        slideOut(); 
       }, 

       function(){ 
        slideIn(); 
       }); 

       settings.tabHandle.click(function(event){ 
        if (obj.hasClass('open')) { 
         slideIn(); 
        } 
       }); 
       clickScreenToClose(); 

     }; 

     var slideOutOnLoad = function(){ 
      slideIn(); 
      setTimeout(slideOut, 500); 
     }; 

     //choose which type of action to bind 
     if (settings.action === 'click') { 
      clickAction(); 
     } 

     if (settings.action === 'hover') { 
      hoverAction(); 
     } 

     if (settings.onLoadSlideOut) { 
      slideOutOnLoad(); 
     }; 

    }; 
})(jQuery); 

Answer 1

試試下面的代碼爲您的項目。

HTML

<section id="hiddenPanel" class="txt-highlight-color bg-color bg-pattern"></section> 
<span id="close-bar" class="myButton">close button</span> 

CSS

#hiddenPanel {position:fixed; top:0; right:-200px; width:200px; background-color:grey; height:250px;} 

jQuery代碼：

var speed = 300; 
     $('#close-bar').on('click', function(){ 

      var $$ = $(this), 
       panelWidth = $('#hiddenPanel').outerWidth(); 

      if($$.is('.myButton')){ 
       $('#hiddenPanel').animate({right:0}, speed); 
       $$.removeClass('myButton') 
      } else { 
       $('#hiddenPanel').animate({right:-panelWidth}, speed); 
       $$.addClass('myButton') 
      } 

     }); 

小提琴示例：http://jsfiddle.net/Rxsd5/2/