jQuery animate() 通过左右滑动来隐藏和显示元素

Posted 2023-05-08

【中文标题】jQuery animate() 通过左右滑动来隐藏和显示元素

【英文标题】：jQuery animate() to hide and show elements by sliding left and right

【发布时间】：2011-03-17 23:00:48

【问题描述】：

我正在尝试使用 jQuery 制作动画。

更新

我让它按照我想要的方式工作。这是 jQuery：

    $(document).ready(function() 

        // go chat button
        $('#go-chat input').click(function() 
            $('#search, #go-chat').animate(width: '0px', 1000, function() 
                    $(this).hide();
                    $('#login, #go-search').animate(width: '573px', 1000, function() 
                            $(this).show();
                        
                    );
                
            );
        );
        $('#go-search input').click(function() 
            $('#login, #go-search').animate(width: '0px', 1000, function() 
                    $(this).hide();
                    $('#search, #go-chat').animate(width: '573px', 1000, function() 
                            $(this).show();
                        
                    );
                
            );
        );
    );

现在的问题是文本在幻灯片发生时换行并且非常难看。我怎样才能使文本作为搜索栏和输入字段滑入/滑出，而不会随着宽度变窄/展开而换行？

谢谢。

老问题

基本上，我想在搜索栏中向左滑动，基本上将其隐藏，然后将其下方的 4 个输入滑出。目前，我已将它们放在搜索栏下方，但我的计划是隐藏它们，当按下“Go Chat”按钮时，搜索向左滑出，4 个输入向右滑入。

现在，搜索框滑入中心并没有完全消失。我怎样才能让它发挥我想要的作用？如果我的解释不清楚我在寻找什么，请要求澄清。

谢谢。

【参考方案1】：

尝试改变

$('#search').animate( 
                    width: '0px',
                , 
                    '1000'
                );

到

$('#search').animate( width: '0px' , 1000, function() 
                $(this).hide();
             );

动画完成后，元素将被隐藏。

我还注意到“搜索”文本的动画效果不佳。 在制作动画之前，请尝试删除（或淡出）文本。请记住在切换回来时再次显示它。例如：

$('#search-label').hide();

或

$('#search-label').fadeOut();

【讨论】：

谢谢。现在，我将如何处理幻灯片效果...我希望它向左滑动，而不是像目前那样向中心滑动？

是的，我成功了。我会在修复一些小的视觉细节后发布我的解决方案。

【参考方案2】：

我想通了。为了让它向左滑动，我给了相应的周围<div>s 一个宽度和margin-left: 0px;。然后我遇到了文本换行的问题，因为宽度变窄/变宽了。为了解决这个问题，我在 CSS 中添加了 white-space: nowrap; 以对应 <div>s。

这是 jQuery：

$(document).ready(function() 
    $('#go-chat input').click(function() 
        $('#search, #go-chat').animate(
            
                width: '0px'
            , 1000, function() 
                $(this).hide();
                $('#login, #go-search').animate(
                    
                        width: '573px'
                    , 1000, function() 
                        $(this).show();
                    
                );
            
        );
    );
    $('#go-search input').click(function() 
        $('#login, #go-search').animate(
            
                width: '0px'
            , 1000, function() 
                $(this).hide();
                $('#search, #go-chat').animate(
                    
                        width: '573px'
                    , 1000, function() 
                        $(this).show();
                    
                );
            
        );
    );
);

... 和 CSS：

#search 
    border: 1px solid #999999;
    -moz-border-radius: 5px;
    width: 573px;
    height: 40px;
    margin: auto;
    margin-top: 100px;
    margin-left: 0px;
    position: relative;


#go-chat 
    width: 575px;
    margin: auto;
    margin-top: 36px;
    margin-left: 0px;
    padding-top: 5px;
    white-space: nowrap;


#login 
    border: 0px;
    width: 0px;
    display: none;
    margin: auto;
    margin-top: 100px;
    margin-left: 0px;
    position: relative;


#go-search 
    width: 0px;
    margin: auto;
    margin-top: 36px;
    margin-left: 0px;
    padding-top: 5px;
    white-space: nowrap;
    display: none;

如果有人对我格式化 jQuery 的方式有任何建议，请告诉我你的想法……你喜欢我的格式化方式吗？我觉得它看起来有点尴尬。

【参考方案3】：

$('#search').animate(width: '0', 1000, function()
    $(this).hide();
);

切换时页面有点怪...注意你的选择器。

【讨论】：

谢谢。现在，我将如何处理幻灯片效果...我希望它向左滑动，而不是像目前那样向中心滑动？

可能您希望将位置或边距同时设置为宽度：0 动画。 .animate(width: '0', left:'150px');类似的东西。