Question

所以我试图产生一种效果，当你点击一个图像时，另外两个图像（存储在#sharebar中）将从左侧滑出。问题是当图像滑出时，它们从按钮下方的左侧滑动，然后在动画完成后向上移动。我希望一切都在同一水平，以便图像看起来从后面滑出。

任何人都可以帮助我吗？这就是我所拥有的：

    <script>
    $(function() {
        // run the currently selected effect
        function slideOut() {

            var options = {};


        $("#sharebar").toggle("slide", options, 500,  callback() ); 

        };

        function callback() {

        };

        // set effect from select menu value
        $( "#download_link" ).click(function() {
            slideOut();
            return false;
        });

        $("#sharebar").hide();

    });
    </script>

</head>
<body>

<div style="margin:200px;min-height:10px;background:#e9e9e9;overflow:hidden;">

<img  id="download_link" src="Download.png" style="z-index:2;"/> 
<span id="sharebar" style="width:20px;z-index:1;">
<img id="exercise_link" src="exercises.png" /> 
<img id="subtitles_link" src="subtitles.png" />
</span>

提前致谢！：）

编辑：我认为这可能与z-index有关，但我不太确定

Answer 1

设置＆＃34; top＆＃34;要有风格的元素=＆＃34;位置：固定＆＃34;解决了这个问题！

编辑：哈哈不确定为什么会有一个downvote，它最终解决了问题....：P

Answer 2

我肯定会说z-index将会成为现实。看起来你已经设置了一些z-index的东西;只需修复您的z-index，使图像层像您希望的那样彼此叠加。

<img id="download_link" src="Download.png" style="z-index:2;"/> 
<span id="sharebar" style="width:20px;z-index:0;">
<img id="exercise_link" src="exercises.png" style="z-index:1" /> 
<img id="subtitles_link" src="subtitles.png" style="z-index:1" />

正如旁注：您最好将这些style属性放在CSS文档中，而不是将它们放在HTML标记中。

无法让jQuery在图像后面滑动

2 个答案: