如何使用幻灯片效果在点击时显示或隐藏 div？答案

【问题标题】：How to reveal or hide div on click with a slide effect?如何使用幻灯片效果在点击时显示或隐藏 div？
【发布时间】：2014-10-07 14:05:41
【问题描述】：

我尝试使用 jquery 切换一个小动画。

我有一个 div (1, GREEN) 隐藏了另一个 div (2, RED & BLUE)。在 DIV (1, GREEN) 中还有另一个 DIV (3, YELLOW)，用作按钮。我想要实现的是当用户点击 DIV (3, YELLOW), DIV (1, GREEN) (其中包含 DIV (3, YELLOW)) 向左滑动所以 DIV (2, RED & BLUE) 显示.

要了解我在做什么，看看我到目前为止有什么：

HTML：

 <div class="pollSlider">
    <div class="yesno">
        Yes / No
    </div>

</div>
<div id="pollSlider-button">
    <div id="close-button"></div>
</div>

CSS

.pollSlider{
    position:fixed;
    height:50px;
    background:red;
    width:300px;
    right:0px;
    top:300px;
}

.yesno{
    position:absolute;
    height:50px;
    background:blue;
    width:50px;
    right:0px;
    color:#FFF;
}

#pollSlider-button{
    position:fixed;
    width:300px;
    height:50px;
    right:0px;
    background:green;
    top:300px;
}

#close-button{
    position:absolute;
    width:10px;
    height:10px;
    right:10px;
    top:7px;
    background:yellow;
}

JQUERY

$(document).ready(function()
{
    var slider_width = $('.yesno').width();//get width automaticly
  $('#close-button').click(function() {
    if($(this).css("margin-right") == slider_width+"px" && !$(this).is(':animated'))
    {
        $('#pollSlider-button').animate({"margin-right": '-='+slider_width});
    }
    else
    {
        if(!$(this).is(':animated'))
        {
            $('#pollSlider-button').animate({"margin-right": '+='+slider_width});
        }
    }


  });
 });

齐心协力： http://jsfiddle.net/XNnHC/1974/

我的代码有一个问题。它不再隐藏 DIV (2, RED & BLUE)，它只是不断向左滑动，即使它已经通过了 DIV (2) 的 RED 部分。

我需要改变什么来简单地切换 DIV。如果隐藏，单击黄色将显示蓝色，并在显示时将其隐藏。 RED 并不重要，它不会保存任何信息。

【问题讨论】：

标签： jquery jquery-animate slide

【解决方案1】：

您在比较错误的值。首先，您移动“pollslider-button”，但签入 $this，这是关闭按钮。由于它嵌套在 div 内，因此它的相对边距不会改变。

我已经删除了 :animated 部分，因为您现在不使用它，请随时重新添加它。

下面的代码在小提琴中可以正常工作

$(document).ready(function()
    {
        var slider_width = $('.yesno').width();//get width automaticly
      $('#close-button').click(function() {
        if($('#pollSlider-button').css("margin-right") == slider_width+'px')
        {
            $('#pollSlider-button').animate({"margin-right": '-='+slider_width});
        }
        else
        {

                $('#pollSlider-button').animate({"margin-right": '+='+slider_width});

        }


      });
     });

【讨论】：

谢谢！这就像我想要的那样工作！感谢您的帮助！

【解决方案2】：

我设法让它 div 滑回默认值，而不是继续向左滑动。

我改变的是我添加了一个slideCount 变量，让脚本知道何时返回“关闭”状态（隐藏红色和蓝色）以及更改第一个if 条件查看@ 987654324@转$("#pollSlider-button")。

现在，当您单击它一次时，它会显示为蓝色。再次单击它，它将显示红色。之后将再次隐藏 BLUE 和 RED。

Here's a JSFiddle

【讨论】：

感谢您的帮助。 RED 并不重要，因为它没有任何东西。但无论如何感谢您的帮助，得到我的解决方案！

【解决方案3】：

尝试使用这个

$(document).ready(function()
{
   var clicked = true;
   var slider_width = $('.yesno').width();//get width automaticly
   $('#close-button').click(function() 
   {
    if(clicked){
        $('#pollSlider-button').animate({"margin-right": '+='+slider_width});
       clicked = false;
    } else {
       $('#pollSlider-button').animate({"margin-right": '-='+slider_width});
       clicked = true; 
    }

 });
});

【讨论】：