Ширина анимации на пользовательском слайдере

Я создаю пользовательский слайдер 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

Пожалуйста, создайте скрипач для этого и разместите URL-адрес, чтобы мы могли легко проверить, не переосмысливая себя ... (fiddler.net) – arkascha

Этот сайт звучит как убежище для стариков с вредными привычками: p –

jsfiddle. net это то, что вы хотите. –

Изменение 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

спасибо, thats perfect :) – danyo

Ширина анимации на пользовательском слайдере

ответ

Смежные вопросы