javascript - Jquery 滑出/滑入框

Question

我在显示和隐藏文本框时遇到问题。

您可以在以下位置看到它的工作:http://jsfiddle.net/CVPSg/

问题:

我要点击<li><a href="# " title=" ">About</a></li>并显示 <aside id="aboutBox">来自屏幕左侧(显示:无)

然后，我要关闭<aside id="aboutBox">与 <h2><a href="#" title=" ">Close X</a></h2>

此外，<aside id="aboutBox">不隐藏和/或不再次向左移动以显示无。

它一直向屏幕右侧移动。

我希望这是有道理的。

我也在这里添加了代码:

HTML

<ul class="extras">
          <li><a href="# " title=" ">About</a></li>
            <!-- <li>Blog</li> For the future -->
            <li class="hidesearch showsearch">
                <form action="http://www.racamstudio.com/searchSubmit" method="post" name="seachform">
                    <input type="text" id="searchInputRight" value="Search..." in-focus="false" name="searchText">
                    <input width="16" height="16" type="image" id="searchbuttonRight" alt="Submit" name="submit" src="http://www.racamstudio.com/resources/images/search_icon_over.gif">
                </form>
            </li>
        </ul><!-- end extras-->


        <aside id="aboutBox">
            <h1>Welcome</h1>
            <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
            <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
            <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
              <h2><a href="#" title=" ">Close X</a></h2>
         </aside><!-- end aboutbox -->  

Javascript

$(function() {
    // slideshow
    var currentPosition = 0;
    var slideWidth = 340;
    var slides = $('#aboutBox');
    var numberOfSlides = 2; // slides.length: show all images 
    // Remove scrollbar in JS - It is added in CSS for user how does not have js enable
    $('#aboutBox').css('overflow', 'hidden');
    // Wrap all .slides with #slideInner div 
    // variable slides = #aboutBox
    slides.wrapAll('<div id="wrapAbout"></div>').css({
        'display': 'none'
    });

    $('#wrapAbout').css('width', '340px');

    // Create event listeners for .controls clicks
    $('.extras li a').bind('click', function() {
        // Determine new position
        currentPosition = ($(this).attr('id') == 'left') ? currentPosition + 1 : currentPosition - 1;
        // Hide / show controls
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#aboutBox').animate({
            'marginLeft': slideWidth * (-currentPosition),
            'display': 'block'
        });
    });
    // manageControls: Hides and shows controls depending on currentPosition
    function manageControls(position) {
        // Hide left arrow if position is first slide
        if (position == 0) {
            $('#aboutBox').hide()
        } else {
            $('#aboutBox').show()
        }
    }
});

Answer 1

您不想在滑出部分使用 overflow:hidden，您希望在包装器中使用它。您不想为 margin-left 或 display 设置动画，您想要为包装器的宽度设置动画。也没有必要绝对定位你的滑出。此外，您可以通过在单独的处理程序中处理显示和隐藏操作来简化操作:

var slideWidth = 340;
var slides = $('#aboutBox').css('width', slideWidth);
slides.css({
    width: slideWidth,
    height: slides.attr('scrollHeight')
});
var wrapper = slides.wrap('<div>').parent().css({
    width: 1,
    height: slides.height(),
    overflow: 'hidden',
    display: 'none'
});
$('#show').click(function() {
    if(wrapper.is(':visible'))
        return;
    wrapper.show().animate({
        width: '+=' + slideWidth
    }, 'slow');
});
$('#hide').click(function() {
    wrapper.animate({
        width: 1
    }, 'slow', function() {
        wrapper.hide();
    });
});

我也稍微调整了 HTML 和 CSS:我将 id 属性添加到显示和隐藏链接，并删除了 #aboutBox 的所有定位:http://jsfiddle.net/ambiguous/mp7aR/