如何水平滑动元素

Posted 2023-03-06

【中文标题】如何水平滑动元素

【英文标题】：How to Slide an Element Horizontally

【发布时间】：2018-03-18 22:53:47

【问题描述】：

我需要在 click 函数中添加 else 语句，以便在第二次单击按钮时 .container 消失。

function() 

    $('div.container').css('width':'350px');

     else 

    $('div.container').css('width':'0');

     

);

编辑：

我需要元素在单击按钮时向左切换。

【问题讨论】：

if()在哪里？

不确定在哪里添加 if

使用 toggleClass() 和 css 来做到这一点。如果单击相同按钮两次以上会发生什么？

我想用 .animate( width: 'toggle',

【参考方案1】：

toggle() 方法：

使用 jQuery 你可以使用toggle() 方法。

toggle() 方法在选中元素的 hide() 和 show() 之间切换。

所以你可以简单地拥有

$('#buttonId').on('click', function()
    $('#container').toggle();
)

div
  background-color: #a8a8ff;
  height: 100px;
  width: 350px

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="buttonId">Click Me!</button>
<div id="container" class="long"></div>

toggleClass() 方法：

根据您的评论，如果您想切换样式（例如：宽度），最好为您的样式定义一个类并使用toggleClass() 方法。

toggleClass() 方法在添加和删除类之间切换。

$('#buttonId').on('click', function()
    $('#container').toggleClass('long short');
)

div
  background-color: #a8a8ff;
  height: 100px;


.long
  width: 350px;


.short
  width: 0px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="buttonId">Click Me!</button>
<div id="container" class="long"></short>

animate() 方法：

根据您的第二个建议，您可以使用animate() 方法来模拟幻灯片功能。

jQuery animate() 方法可让您创建自定义动画。

要将元素向左滑动：（感谢JQGeek 他的回答here。）

$('#buttonId').on('click', function()
    $('#container').animate(width:'toggle',350);
)

div
  background-color: #a8a8ff;
  height: 100px;
  width: 350px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="buttonId">Click Me!</button>
<div id="container"></div>

【讨论】：

是的，我如何切换容器的宽度 $('div.container').css('width':'350px');

是的，谢谢，但我希望它从左侧滑动切换。我可以使用它还是需要使用 .animate？

@Dev 我再次更新了我的答案。检查一下滑动切换功能。

如果我将内容添加到容器中，我如何将其也滑掉？

@Dev 这实际上不是幻灯片，它更像是一种类似幻灯片的效果，但我们正在切换width 属性。如果你想要一张实际的幻灯片（在视图内外移动元素），我建议你看看this question 和前两个答案。

【参考方案2】：

你可以这样做

$(document).on('click', 'button_selector', function () 
    if (true) 
        // your code
    
    else
        // your code
    
);

建议

您可以为此使用切换

$(document).on('click', 'button_selector', function () 
    $('div.container').toggle();
);

【讨论】：

为什么我需要'button_selector'

处理事件的按钮，你必须提供像id, class这样的按钮选择器或任何其他选择器属性

我唯一的问题是它不会横向切换

toggle 将切换您的 div 或说出元素，这意味着它将显示或消失您的元素，例如显示或隐藏

我想要从左侧滑动切换 我可以使用这个还是需要使用 .animate？

【参考方案3】：

你可以关注我的代码

$(function()
   var firstClick = 0;
   $("button").click(function()
       firstClick++;
       if(firstClick==2)
          $('div.container').hide();
       else
         $('div.container').show();
   );
)