Help me please. I want to optimize the slider code. The input to the s.displayRight function is the oBlock from s.showInfoRight. I want to submit two objects so that the 'left' direction is determined from the s.showInfoRight function (the object is direct). But the distance is not calculated and the slider freezes. Is it possible to do this at all?

function Services(sSelector){ var s = this; s.main = function(){ s.init(sSelector); s.link = s.find('.breadNav_link'); s.left = s.find('.arrow__left'); s.right = s.find('.arrow__right'); s.block = s.find('.services__block'); s.current = 0; s.max = s.block.length; sx = 2000; s.right.bind('click', s.showNext); s.left.bind('click', s.showPrev); s.link.bind('click', s.showInfo); } s.showNext = function(){ s.showInfoRight(+1); } s.showPrev = function(){ s.showInfoLeft(-1); } s.curObject = function(oCurrent){ var curObject = s.find('.services__block:eq(' + oCurrent + ')'); curObject.animate({opacity: 0}, 300, function(){ curObject.removeClass('services__block_active'); }); } s.length = function(oLength){ if(oLength >= s.max){ s.current = 0;} else if(oLength <0){ s.current = s.max -1;} } s.showInfoRight = function(iShift){ s.curObject(s.current); s.current+=iShift; s.length(s.current); s.displayRight((s.find('.services__block:eq(' + s.current + ')')), 'left'); } s.displayRight = function(oBlock, direct){ setTimeout(function(){ oBlock.stop().animate('{'+ direct + ': 2000}', 50, function(){ oBlock.addClass('services__block_active').css('opacity', 1); }); oBlock.animate({left: 0}, 900); }, 300); } s.showInfoLeft = function(iShift){ s.curObject(s.current); s.current+=iShift; s.length(s.current); s.displayLeft(s.find('.services__block:eq(' + s.current + ')') ); } s.displayLeft= function(oBlock){ setTimeout(function(){ oBlock.animate({right: 2000, left: -2000}, 50, function(){ oBlock.addClass('services__block_active').css('opacity', 1); }); oBlock.animate({right: 0, left:0}, 900); }, 300); }; $(document).ready(s.main); } Services.prototype = new Component();
  • one
    guess you want computed property : animate({[direct]: 2000} - Grundy
  • Thank! What was needed! - I.Swen

1 answer 1

Further I write from the assumption that in direct there is a line of the type "left" and "right";

  1. According to the documentation , the animate function waits for the first Plain Object parameter. Of course, it is possible to pass a string to it syntactically, but at the same time it will not process it.
  2. Of course, there is enough implicit type conversions in js, but an envelope of a string to an object and back is too cunning operation. By default, it would be very imprudent to do it even for such a free language as js. Nobody converts anything, the function does not process the line, everything collapses, the children cry, the darkness hangs over the world.
  3. Comes to mind. And if such a thing, why not convert the string with handles? Well, in theory, this is possible with the help of JSON.parse , but in most cases it is not necessary to do this, there are more normal methods.

  4. The most common solution is to prepare the object in advance and pass the prepared object to the input of the function. If we do not know in advance the name of the object key, that is, it is stored in a variable, then it cannot be specified through a point. But it is possible through square brackets.

     var animateParams = {}; animateParams[direct] = 2000;

    And then call in the spirit:

     oBlock.stop().animate(anmiateParams,//какие-то еще параметры

  5. In general, for many years everything was done as in clause 4. But last year the updated javascript standard was finally adopted, which is normally supported by modern browsers and allows you to write shorter and more beautiful, as Grundy told you in the comments:

     animate({[direct]: 2000}, //какие-то еще параметры

    This is called a computed property . Browser support is very good.

  • Thank you very much! Works - I.Swen