Question

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

我有一个div（1，GREEN）隐藏了另一个div（2，RED＆amp; BLUE）。在DIV（1，GREEN）中有另一个DIV（3，YELLOW），它起到按钮的作用。我想要实现的是当用户点击DIV（3，YELLOW），DIV（1，GREEN）（其中包含DIV（3，YELLOW））向左滑动时DIV（2，RED＆amp; 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并不是真正重要的，它不会包含任何信息。

Answer 1

您正在比较错误的值。首先你移动＆＃34; pollslider-button＆＃34;但签入$这是关闭按钮。由于它是嵌套的，因此div的相对余量不会改变。

我已删除了：动画部分，因为您现在没有使用它，请随时重新添加。

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

$(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});

        }


      });
     });

Answer 2

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

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

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

Here's a JSFiddle

Answer 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; 
    }

 });
});

如何通过幻灯片效果显示或隐藏div？

3 个答案: