Question

我目前有一个div中的幻灯片，当单击“关闭”按钮时，它会从右侧滑入。

我遇到的问题是，当点击切换时，div会滑入，然后自动再次滑出。

我希望单击切换以启动div中的幻灯片，然后再次单击以关闭它。

如果我点击div的实际句柄（.handle），它似乎工作正常。

如果您需要更多信息，请与我们联系。

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

Mark Up：

<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/

滑入div切换不起作用

1 个答案: