When you click on the slide shift button, each time there is a countdown from 0px and the slide starts to scroll from 1 slide. How to make flipping the slide from the point at which I am already. How do I understand translate3d can only be used as a step? and the .animate method duplicates the transition from css? codepen

  (document).ready(function() { $(".project-gallerey").each(function () { // ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅ΠΌ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ слайдСр var obj = $(this); $(obj).append("<div class='pagination-gallerey'></div>"); $(obj).find(".slider-image").each(function () { $(obj).find(".pagination-gallerey").append("<span class='nav-pengetation' rel='"+$(this).index()+"'></span>"); // добавляСм Π±Π»ΠΎΠΊ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ $(this).addClass("slider"+$(this).index()); }); $(obj).find("span").first().addClass("on"); // Π΄Π΅Π»Π°Π΅ΠΌ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт мСню }); }); function sliderJS (obj, sl) { // slider function var ul = $(sl).find("ul"); // Π½Π°Ρ…ΠΎΠ΄ΠΈΠΌ Π±Π»ΠΎΠΊ var bl = $(sl).find("li.slider"+obj); // Π½Π°Ρ…ΠΎΠ΄ΠΈΠΌ любой ΠΈΠ· элСмСнтов Π±Π»ΠΎΠΊΠ° var step = $(bl).width(); // ΡˆΠΈΡ€ΠΈΠ½Π° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° $(ul).animate({'opacity': step*obj }, { step: function (now, fx) { $(this).css({"transform": "translate3d( " + - now + "px, 0px, 0px)"}); }, duration: 500, easing: 'linear', queue: false, complete: function () { } }, 'linear'); // 500 это ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΌΠΎΡ‚ΠΊΠΈ } $(document).on("click", ".nav-pengetation", function() { // slider click navigate var sl = $(this).closest(".project-gallerey"); // Π½Π°Ρ…ΠΎΠ΄ΠΈΠΌ, Π² ΠΊΠ°ΠΊΠΎΠΌ Π±Π»ΠΎΠΊΠ΅ Π±Ρ‹Π» ΠΊΠ»ΠΈΠΊ $(sl).find("span").removeClass("on"); // ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ элСмСнт $(this).addClass("on"); // Π΄Π΅Π»Π°Π΅ΠΌ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ var obj = $(this).attr("rel"); // ΡƒΠ·Π½Π°Π΅ΠΌ Π΅Π³ΠΎ Π½ΠΎΠΌΠ΅Ρ€ sliderJS(obj, sl); // слайдим return false; });
  • all the necessary code should be directly in the question, the links can only serve as a supplement - Grundy
  • where is sliderJS called? - Grundy
  • The opacity property is responsible for transparency, and usually its values ​​are from 0 to 1 - Grundy
  • @Grundy is clearly what opacity is responsible for. But why the values ​​go to 0? actually the sample code with translate3d took here stackoverflow.com/questions/27302395/… - Drop
  • because in fact the value is not from 0, but from 1 to go - Grundy

1 answer 1

The problem is not understanding how animate works:

In the passed object, the final values ​​of the properties are specified, jQuery takes the current value and calculates the steps.

In the case of the opacity property, browsers, at least chrome, store its values ​​in the range from 0 to 1, so when you click on the second, third button, the movement did not start from the expected value (for example, 320), but from the current one - 1.

The first slide was removed, because it has an index - 0, and for it a new value of the opacity property was set to 0 - which means an absolutely transparent element.

In addition, in this case it is better to use some non-existent property, so as not to affect the other settings.

 $(document).ready(function() { $(".project-gallerey").each(function() { // ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅ΠΌ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ слайдСр var obj = $(this); $(obj).append("<div class='pagination-gallerey'></div>"); $(obj).find(".slider-image").each(function() { $(obj).find(".pagination-gallerey").append("<span class='nav-pengetation' rel='" + $(this).index() + "'></span>"); // добавляСм Π±Π»ΠΎΠΊ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ $(this).addClass("slider" + $(this).index()); }); $(obj).find("span").first().addClass("on"); // Π΄Π΅Π»Π°Π΅ΠΌ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт мСню }); }); function sliderJS(obj, sl) { // slider function var ul = $(sl).find("ul"); // Π½Π°Ρ…ΠΎΠ΄ΠΈΠΌ Π±Π»ΠΎΠΊ var bl = $(sl).find("li.slider" + obj); // Π½Π°Ρ…ΠΎΠ΄ΠΈΠΌ любой ΠΈΠ· элСмСнтов Π±Π»ΠΎΠΊΠ° var step = $(bl).width(); // ΡˆΠΈΡ€ΠΈΠ½Π° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° $(ul).animate({ 'propForTransformAnimation': step * (+obj) }, { step: function(now, fx) { $(this).css({ "transform": "translate3d( " + -now + "px, 0px, 0px)" }); }, duration: 500, easing: 'linear', queue: false, complete: function() {} }, 'linear'); // 500 это ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΌΠΎΡ‚ΠΊΠΈ } $(document).on("click", ".nav-pengetation", function() { // slider click navigate var sl = $(this).closest(".project-gallerey"); // Π½Π°Ρ…ΠΎΠ΄ΠΈΠΌ, Π² ΠΊΠ°ΠΊΠΎΠΌ Π±Π»ΠΎΠΊΠ΅ Π±Ρ‹Π» ΠΊΠ»ΠΈΠΊ $(sl).find("span").removeClass("on"); // ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ элСмСнт $(this).addClass("on"); // Π΄Π΅Π»Π°Π΅ΠΌ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ var obj = $(this).attr("rel"); // ΡƒΠ·Π½Π°Π΅ΠΌ Π΅Π³ΠΎ Π½ΠΎΠΌΠ΅Ρ€ sliderJS(obj, sl); // слайдим return false; }); 
 ul { list-style-type: none; } .project-gallerey { float: left; width: 50%; position: relative; } .project-info { float: left; width: 50%; padding-left: 20px; } .nav-pengetation { width: 15px; height: 15px; display: inline-block; background: red; border-radius: 100%; margin-left: 5px; cursor: pointer; } .nav-pengetation:first-child { margin-left: 0; } .slider-gallerey { overflow: hidden; } .sliders-wrapper { width: 2500px; padding: 0; } .slider-image { float: left; width: 120px; } .base { width: 220px; margin: 0 auto; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="base"> <div class="close-modal"></div> <div class="project-gallerey"> <div class="slider-gallerey"> <ul class="sliders-wrapper"> <li class="slider-image"> <img src="http://placehold.it/100/e499e4/fff&amp;text=1" alt=""> </li> <li class="slider-image"> <img src="http://placehold.it/100/e499e4/fff&amp;text=2" alt=""> </li> <li class="slider-image"> <img src="http://placehold.it/100/e499e4/fff&amp;text=3" alt=""> </li> </ul> </div> </div> </div>

  • And why to screen in brackets (+ obj)? - Drop
  • @Drop, on the machine did, in any case, it is better to select such non-obvious transformations so that you can immediately see it - Grundy