下面的代码不能以两种方式工作。它在每次单击后都不会像它应该的那样向左移动(我是否正确声明了位置:相对正确?),并且左动画的延迟为1秒,但是淡入淡出效果应仅设置为100。褪色也需要1000。在此先感谢,这是我的代码:

<html>
<center>
    <img src="image1.jpg" id="a1"></img>
    <br>
    <h1>it worked.</h1>
    <br>

    <img src="image2.jpg" width="500" height="500" id="a2" style="position:relative"></img>
</center>

</html>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    var x = .99;

    $(document).ready(function () {

        $("h1").hide();


        $("#a2").click(function () {

            if (x > .15) {
                x -= .1
                $("#a1").animate({
                    "left": "+=1000px"
                }, 1000);
                $("#a1").fadeTo(100, x);

            } else {
                $("h1").show(10);
            }

        });

    });
</script>

最佳答案

“ left” css属性仅适用于非静态定位的元素。因此,请检查此内容-添加相对于第一张图片的样式位置:

<img src="image1.jpg" id="a1" style="position:relative" />


演示:http://jsfiddle.net/57nZp/

关于javascript - jQuery-每次单击将图像向左移动,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21964678/

10-09 16:21