如何显示或隐藏点击幻灯片效果的div？

Question

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

我有一个div（1，绿色），它隐藏了另一个div（2，RED & BLUE）。在DIV（1，GREEN）中有另一个DIV（3，YELLOW），用作按钮。我试图达到的是当用户点击DIV（3，黄色），DIV（1，绿色）（其中包含DIV（3，黄色））向左滑动，因此DIV（2，红色&蓝色）显示。

要明白我在做什么，看什么我到目前为止有：

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


    }); 
});  

所有togheter在小提琴： http://jsfiddle.net/XNnHC/1974/

有一个关于我的代码一个问题。它不会隐藏DIV（2，RED & BLUE），即使它已经通过了DIV（2）的RED部分，它也会继续向左向下滑动。

我需要更改为简单切换DIV。点击YELLOW将显示蓝色，如果它隐藏并在隐藏时显示。 RED并不重要，它不会保存任何信息。

Answer 1

你是在比较错误的价值观。 首先你移动“pollslider-button”，但签入$这是关闭按钮。由于它嵌套在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

尝试使用此

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

}); 
});  

Answer 3

我设法得到它的股利滑动返回到默认，而不是继续向左滑动内正常工作。

我改变的是我添加了一个slideCount变量来让脚本知道什么时候回去一个“闭合”状态（藏红色和蓝色）以及来自看着$(this)到$("#pollSlider-button")改变第一if条件。

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

Here's a JSFiddle