Question

以下代码无法以两种方式工作。每次点击后它都不会向左移动（我是否声明了位置：相对正确吗？），左边动画的延迟也是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>

Answer 1

“left”css属性仅适用于非静态定位的元素。所以请检查一下 - 相对于你的第一张图片添加样式位置：

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

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

jQuery - 每次点击都会将图像移动到左侧

1 个答案: