jQuery анимация содержимого слайдер петля

У меня возникли проблемы с ползунком контента, который я создаю. Есть 4 коробки содержимого, размещенные внутри тегов, расположенных абсолютно внутри относительно позиционированной обертки. Слева направо коробки имеют ID # module1, # module2, # module3 и # module4 соответственно. Когда я нажимаю кнопку, я хочу, чтобы контент прокручивался вправо.jQuery анимация содержимого слайдер петля

# module4 следует анимировать с правой стороны страницы, скрыть, а затем вернуться в режим просмотра в левой части страницы.
# module3 должен встать на место, где # module4 был и имеет непрозрачность, равную 50%, такую же, как # module4.
# module2 должен переместиться в место, где был # module3.
# Модуль1 должен иметь непрозрачность, установленную на 100%, и перейти туда, где # module2 был.

Проблема, с которой я сталкиваюсь, заключается в том, когда # module4 прокручивается вправо от страницы, тогда она видна, когда она перемещается в левую сторону страницы. Я не могу понять, как правильно скрыть это из вида, пока он не прокрутится влево с левой стороны.

Вот мой код анимации:

#module1,#module2,#module3,#module4{position:absolute;top:0;width:31.9444%;height:200px;background:#999;} 
 
.wrapper{width:100%;height:220px;position:relative;} 
 
button{position:relative;z-index:1000;}

<body onLoad="contSlidr()"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    
 
<div class="wrapper"> 
 
    <div id="module1">Module1</div> 
 
    <div id="module2">Module2</div> 
 
    <div id="module3">Module3</div> 
 
    <div id="module4">Module4</div> 
 
</div> 
 

 
<script type="text/javascript"> 
 
     ////////////////////////////////// 
 
     //  V a r i a b l e s  //   
 
     ////////////////////////////////// 
 
     var t = 400; 
 
     var mod = [$('#module1'),$('#module2'),$('#module3'),$('#module4')]; 
 
     var m2 = mod[1].width(); 
 
     var scrnW = $(document).width(); 
 
     ////////////////////////////////// 
 
     function contSlidr(){ 
 
     $(document).ready(function(){ 
 
      mod[0].css('left','-23%'); 
 
      mod[0].css('opacity','.5'); 
 
      mod[1].css('left',scrnW*0.14583); 
 
      var m2PosL = scrnW*0.14583; 
 
      mod[2].css('left',m2 + m2PosL + (scrnW*.041667)); 
 
      mod[3].css('left','88.75%'); 
 
      mod[3].css('opacity','.5'); 
 
     }); 
 
     } 
 
     ////////////////////////////////// 
 
     function animateRight(){ 
 
     var m2PosL = scrnW*0.14583; 
 
     mod[0].animate({ 
 
      left:scrnW*0.14583, 
 
      opacity: 1 
 
     },t); 
 
     mod[1].animate({ 
 
      left: parseInt(m2 + m2PosL + (scrnW*.041667)) 
 
     },t); 
 
     mod[2].animate({ 
 
      left:"88.75%", 
 
      opacity:.5 
 
     },t); 
 
     mod[3].animate({ 
 
      left:"120%", 
 
     },{duration:t/2}); 
 
     mod[3].css('left','-120%'); 
 
     mod[3].animate({ 
 
      left: "-23%", 
 
     },{duartion:t}); 
 
     var b = mod.pop(); 
 
     mod.unshift(b); 
 
     } 
 
     ////////////////////////////////// 
 
    </script> 
 

 
<button onMouseUp="contSlidr()">Set Left</button> 
 
<button onMouseUp="animateRight()">Move Right</button> 
 
</body>

источник

2014-11-04 solid90

использование 'onmouseover' вместо OnMouseUp нет по умолчанию OnMouseUp событие в DOM СОБЫТИЙ –

В то время как .animate() делает запись в очереди FX анимации, .css не делает - его действие немедленно.

Следовательно, последовательность mod[3].animate(...); mod[3].css(...); mod[3].animate(...) не будет вести себя так, как вы пожелаете.

Вы хотите для первой из этих анимаций завершить до применения .css() и начала второй анимации:

mod[3].animate({left:"120%"}, t/2).promise(function() { 
    mod[3].css('left','-120%').animate({left: "-23%"}, t); 
});

источник

2014-11-04 20:59:27

Спасибо за объяснение, кажется, что в моем текущем коде, что css просто игнорируется, поэтому я думаю, что вы на что-то объясняете. Когда я пробую код, который вы предоставили, мода [3] просто исчезает. Думаю, вы немного приблизили меня к решению этой проблемы. – solid90

Да, я не пробовал проверять css/анимации, просто чтобы обеспечить шаблон, который будет их упорядочивать. Вам просто нужно поиграть с этими процентными значениями. –

Другой подход (лучше?) Был бы для глубокого клонирования мод [4], отрегулировал бы «левый» клона, чтобы поместить его слева от мода [0] и добавить к обертке .... затем анимировать все четыре divs до скользить вправо. Наконец, убираем, удаляя ныне не существующий оригинальный div, который был клонирован, и обновляя 'mod'. –

Попробуйте это:

function animateRight(){ 
    var m2PosL = scrnW*0.14583; 
    mod[0].animate({ 
     left:scrnW*0.14583, 
     opacity: 1 
    },t); 
    mod[1].animate({ 
     left: parseInt(m2 + m2PosL + (scrnW*.041667)) 
    },t); 
    mod[2].animate({ 
     left:"88.75%", 
     opacity:.5 
    },t); 
    mod[3].animate({ 
     left:"120%", 
    },{duration:t/2}); 
    mod[3].css('left','-120%'); 
    mod[3].css('opacity', '0'); 
    mod[3].animate({ 
     left: "-23%" 
    },{ 
     duartion:t, 
     complete: function() { 
      $(this).css('opacity', '0.5'); 
     } 
    }); 

    var b = mod.pop(); 
    mod.unshift(b); 
    }

источник

2014-11-04 20:46:09

Это близко, но, в DIV-х не анимированы при скольжении они просто исчезают, то появляются. – solid90

Упс! Наверное, я не понял первоначальный вопрос. Рад, что это сработало –

Этот код установил ее для меня. Спасибо вам за помощь!

function animateRight(){ 
    var m2PosL = scrnW*0.14583; 
    if(c > 5){ 
    c = 1 
    } 
    mod[4] = mod[3].clone().attr('id','mod'+c); 
    mod[4].appendTo('.opinionCon'); 
    mod[4].css('left','-120%'); 
    mod[0].animate({ 
     left:scrnW*0.14583, 
     opacity: 1 
    },t); 
    mod[1].animate({ 
     left: parseInt(m2 + m2PosL + (scrnW*.041667)) 
    },t); 
    mod[2].animate({ 
     left:"88.75%", 
     opacity:.5 
    },t); 
    mod[3].animate({ 
     left:"120%", 
    },{duration:t/2}).promise().done(function(){ 
     mod[4].remove(); 
    }); 
    mod[4].animate({ 
     left: "-23%", 
    },{duartion:t}); 
    var b = mod.pop(); 
    mod.unshift(b); 
    ++c; 
    }

источник

2014-11-05 02:40:29 solid90

jQuery анимация содержимого слайдер петля

ответ

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