Schiebeelemente relativ zu ihrer Position mit jQuery

Question

Die folgende Funktion nimmt ein options Argument (Toggle) mit jQuery ein Element gleiten:

// 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) 
    } 
    }) 
} 

Ich will eine vierte Option mirror genannt hinzuzufügen, welche ein weiteres Element Spiegel machen die Bewegung.

Aber dafür muss ich die Elemente relativ zu ihrer aktuellen Position verschieben. Wie kann ich das erreichen?

. (Anmerkung: die Elemente haben ihren position Satz als fixed)

Answer 1

Meine Antwort ist ein wenig anders als die bisher gepostet, sollte aber als Ausgangspunkt für das, was Sie wollen, arbeiten. Ich habe transform verwendet, um die relative Positionierung durchzuführen, da, wenn Sie ein Element bereits mit top left positioniert haben, transform: translate Ihr Element relativ zu seiner festen aktuellen Position verschieben wird. Ich denke, das Animieren der Transformation hat auch einen zusätzlichen Leistungsvorteil. Ich würde das untersuchen.

Modified Code ein bisschen basierend auf (falsch Ich bin sicher) Annahmen in der Demo zu arbeiten:

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

Answer 2

Wenn Ihr Argument .animate() vorbei Sie right: "-=50px" gesetzt, um das Element 50px nach rechts zu schieben davon aktuelle right Wert.

Etwas Ähnliches werden zwei Elemente die gleiche Menge im Verhältnis von ihrer aktuellen Position verschieben:

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

slide(0,50) 

Hier ist eine Arbeits Geige: https://jsfiddle.net/uLv1mz2u/

Ist das, was Sie suchen?

Answer 3

Überprüfen Sie, ob dies funktioniert. Ich habe die vierte Option mirror hinzugefügt und dann die gleiche Animation wie für das erste Element gegeben. Nicht sicher, ob das Handle korrekt ist oder nicht, da ich kein vollständiges Markup habe.

// 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); 
    } 
    }) 
}