php - JQuery 切换注册多个 div

Question

我有以下问题。

我有一个位于页面右侧的寄存器。它的末尾有一个按钮，如果您单击该按钮，则寄存器应该会显示在屏幕上，如果您再次单击，它应该会再次隐藏。

这是我目前的解决方案：

jsfiddle.net/6JLr9/

（按钮：绿色，内容：红色

我的问题是：在隐藏和显示动画期间，按钮不动，动画完成后，按钮直接移动到新的（正确）位置。如何使按钮同时移动？

先感谢您

Answer 1

我对 Javascript 和 CSS 做了一些更改。以下是变化

Javascript：

$(document).ready(
    function(){
        $('.videohilfe').click(function(){
               if($('.videohilfe-wrapper').css('right') == '-200px')
                    $('.videohilfe-wrapper').animate({right:'0px'});
               else
                    $('.videohilfe-wrapper').animate({right:'-200px'});
            });
        }
    );

CSS：

.registers-wrapper {
  position:fixed;
  right:-200px;  /* changed */
  z-index:50;
}

Answer 2

我已经更新了你的jsfiddle。更改了 js 和 css 中的一些内容。

JS：

$(document).ready(
function(){
    $('.registers').click(
        function(){
            if($(this).hasClass('open')){
                $('.registers-wrapper').animate({'margin-left':'-33px'},1000);
                $(this).removeClass('open');
            }else{
                $('.registers-wrapper').animate({'margin-left':'-233px'},1000);
                $(this).addClass('open');
            }         
        })
}
);

CSS：

.registers {
width:33px;
height:136px;
background-repeat:no-repeat;
float:left;
z-index:50;
}

.registers-content {
height:136px;
width:200px;
background-repeat:repeat-x;
background-color:red;
float:left;
z-index:50;
}

.registers-wrapper {
  position:fixed;
  left:100%;
  z-index:50;
    margin-left:-33px;
    width:233px;
}



.videohilfe-wrapper {
top:160px;
}
.videohilfe {
background-color:green;
}
.videohilfe-content {
}

现在它按预期工作。