自定義滑塊上的動畫寬度

我正在製作自定義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正確的，我做了。我也必須將這個職位設置爲「相對」才能發揮作用。當我這樣做時，圖像就會堆疊在一起。

有關如何解決此問題的任何建議？

來源

2013-07-04 danyo

請爲此創建小提琴手和文章的網址，使我們可以很容易地檢查，而不必重新實現自己......（fiddler.net） – arkascha

該網站聽起來像老男人與壞習慣的天堂：對 –

的jsfiddle。淨這是你想要的。 –

更改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}

這應該做的伎倆。

來源

2013-07-04 14:40:58 putvande

如上所述，圖像需要彼此背後，因爲這是一個滑塊 – danyo

對不起，我的錯誤。我改變了我的答案。希望這可以幫助。 – putvande

謝謝你，那完美:) – danyo

自定義滑塊上的動畫寬度

回答

相關問題