CODEWITHSUNDEEP
javascriptjquery
wyc
wyc

Reputation: 55273

Slide elements relative to their position with jQuery

The following function takes an options argument to (toggle) slide an element with jQuery:

// options
slideRight: {
  direction: 'right',
  startValue: '0',
  endValue: '100px'
},

// function
function(slide) {
  const $el = $(this.el)
  $el.click(() => {
    if ($el.parent().css(slide.direction) === slide.startValue) {
      $el.parent().animate({
        [slide.direction]: slide.endValue
      }, 200)
    } else {
      $el.parent().animate({
        [slide.direction]: slide.startValue
      }, 200)
    }
  })
}

I want to add a fourth option called mirror which will make another element mirror the movement.

But for this, I need to move the elements relative to their current position. How can I accomplish this?

(Note: the elements have their position set as fixed.)

Upvotes: 0

Views: 116

Answers (3)

damo-s
damo-s

Reputation: 1008

My answer is a little different from the ones posted so far but should work as a starting point for what you want. I used transform to do the relative positioning, since if you have an element positioned already with top left, transform: translate will move your item relative to its fixed current position. I think animating transform has an added performance benefit as well. I'd look into that.

Modified your code a bit based on (incorrect I'm sure) assumptions to work in the demo:

const someObject = {    

    // function
    slide: function (slide) {
      const $el = $(slide.el)
      $el.click(() => {
        if (slide.slideRight.direction === 'right') {

            $el.parent().animate({transform: 'translateX(' + slide.slideRight.endValue + 'px)'}, {
                duration: 200,
                step: function (now, fn) {
                    fn.start = $el.hasClass('in') ? slide.slideRight.endValue : slide.slideRight.startValue;
                    fn.end = $el.hasClass('in') ? slide.slideRight.startValue : slide.slideRight.endValue;
                    $el.parent().css({transform: 'translateX(' + now + 'px)'});

                    if (now === fn.end) {
                        $el.toggleClass('in');
                    }
                }
            })

        } else {
          // other stuff
        }
      })
    }

}

someObject.slide({
    el: '.position-me',
    slideRight: {
        direction: 'right',
        startValue: 0,
        endValue: 100,
        mirror: '.position-me-parent-mirror'
    }
})

jsfiddle demo

Upvotes: 2

Developer107
Developer107

Reputation: 1758

Check if this might work. I have added 4th option mirror and then given the same animation to it as given to first element. Not sure if the handle is correct or not as I don't have complete markup.

// options
slideRight: {
  direction: 'right',
  startValue: '0',
  endValue: '100px',
  mirror: '#mirrorElement'
},

// function
function(slide) {
  const $el = $(this.el)
  $el.click(() => {
    if ($el.parent().css(slide.direction) === slide.startValue) {
      $el.parent().animate({
        [slide.direction]: slide.endValue
      }, 200);
      $(slide.mirror).animate({
        [slide.direction]: slide.endValue
      }, 200);
    } else {
      $el.parent().animate({
        [slide.direction]: slide.startValue
      }, 200)
      $(slide.mirror).animate({
        [slide.direction]: slide.startValue
      }, 200);
    }
  })
}

Upvotes: 2

digglemister
digglemister

Reputation: 1487

When passing your argument to .animate() you can set right: "-=50px" in order to slide the element 50px to the right of it's current right value.

Something like this will move two elements the same amount relative from their current position:

function slide(startValue, endValue) {
    var change = endValue-startValue;
    $("#one").animate({right:"-="+change+"px"}, 200);
    $("#two").animate({right:"-="+change+"px"}, 200)  
}

slide(0,50)

Here's a working fiddle: https://jsfiddle.net/uLv1mz2u/

Is this what you are looking for?

Upvotes: 1

Related Questions