替代侧滑块按位置设置动画

Question

我正在使用一个div，当你点击它时会滑出来。

以下是我想要实现的一些图像：

这是Div，默认情况下已折叠

这是Div滑出后（突出显示）

这是屏幕尺寸更改后发生的情况。可点击的div位于内容后面，我希望避免

My Div的CSS：

.sliderDiv {
    z-index: -10;
    position: relative;
    left:  200px;
    width: 240px;   
}

我使用此命令在点击时将其滑出：

slideItOut:function(){
            var divsize=$(".sliderDiv").offset().left-150;
            if(divsize>100){
                $(".sliderDiv").animate({
                    "left":"-=194px"
                },"slow");
            }
            else{
                $(".sliderDiv").animate({
                "left":"+=194px"
                },"slow");
            }
        }

问题是当你调整大小时，它根本没有响应，div实际上隐藏在其他内容之后。也许这种方法不应该响应。

有没有办法让屏幕尺寸发生变化时，相同的“滑块”响应或至少保持其位置？ 我想知道我可以调整窗口或屏幕的任何方式，并且div与前两个图像保持在同一区域。

此外，这是以模态实现的。所以它并不完全在屏幕的固定区域。

Answer 1

我认为，如果没有完整的源代码，它就无法解决。你应该给它的源代码或放在某个地方。然后，我试着解决。或者，我可以提供最佳方式