Question

我正在制作一个自定义的jQuery滑块。这是我的代码：

<head>
    <style>
        p { 
            color: red; 
            margin: 5px; 
            cursor: pointer;
        }
        p:hover { 
            background: yellow; 
        }
        img { 
            position: absolute; 
            top: 0px; 
            left: 0px;
        }
        #img1 {
            width: 652px; 
            height: 314px; 
            position: absolute; 
            top: 0px; 
            left: 0px; 
            z-index: 999999;
        }
        #img2 {
            width: 652px;
            height: 314px;
            position: absolute; 
            top: 0px; 
            left: 0px; 
            z-index:99;
        }
        #content {
            height: 350px; 
            width: 500px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <div id="content">
        <div id="img1" style="background:url(scarf01.jpg);"></div>
        <div id="img2" style="background:url(scarf02.jpg);"></div>
    </div>

    <script>
        $(document).ready(function () {
            $('#clickme').click(function() {
                $('#img1').animate({ "width": "0px" }, 1000);  
            });
        });
    </script>

    <div id="clickme">
        Click here
    </div>
</body>

点击#clickme #img1向左滑动。我希望它向右滑动。我读到我需要正确地浮动#img1，我做了。我还必须将这个位置设置为“相对”才能使其发挥作用。当我这样做时，图像会堆叠在一起。

有关如何解决这个问题的任何建议吗？

Answer 1

将left:0px更改为right:0px;并向position:relative添加#content，如：

#img1{width:652px; height:314px; position:absolute; top:0px; right:0px; z-index:999999; }
#img2{width:652px; height:314px; position:absolute; top:0px; right:0px; z-index:99;}
#content{height:350px; width:500px; position: relative}

这应该可以解决问题。

自定义滑块上的动画宽度

1 个答案: