Enable/disable mousemove function

I have two buttons. When I click on the 1st button, my "d" and "bg" elements move on mousemove.

<section>
    <div class="d"></div>
    <div class="bg"></div>
</section>
<div class="button1"></div>
<div class="button2"></div>


$('.button1').click(function(){
    $('section').delay(2500).mousemove(function(e) {
        parallaxIt(e, ".d", -12.5);
        parallaxIt(e, ".bg", -3.75);
    });
});

function parallaxIt(e, target, movement) {
    var $this = $('section');
    var relX = e.pageX - $this.offset().left;
    var relY = e.pageY - $this.offset().top;

    TweenMax.to(target, 1, {
        x: (relX - $this.width() / 2) / $this.width() * movement,
        y: (relY - $this.height() / 2) / $this.height() * movement
    });
}

I would like that when I click on the 2nd button, the elements do not move anymore.

I tried first the unbind method:

$('.button2').click(function(){
    $('section').unbind('mousemove');
});

With this, my problem is that when mousemove is stopped, my elements do not finish at their original positions but suddenly stays in the position where they were in the moment of stopping them. Somehow, I would prefer this method, if there is a way for me.

The second method was the off method:

$('.button2').click(function(){
    $('section').mousemove(function() {
        $('.d, .bg').off("mousemove", mouse);
    });
});

Here my problem that it does not stop mouse move after click at all.

Maybe it is important to know that I use jQuery v1.11.0. Please give me a simple answer as I make webdesign for hobby, mainly for my own personal websites or for friends, so I am not professional.

To stop the mouse movement effect and bring the elements back to where they started when you click the second button, you can do it by turning off the mouse movement and using a function to put things back where they belong.

// Initialize a variable to track whether the mousemove effect is active
var isMousemoveActive = false;

// Function to reset the elements' positions to their original state
function resetPositions() {
  // Use TweenMax to smoothly reset positions
  TweenMax.to(".d, .bg", 1, { x: 0, y: 0 });
}

// Button 1 click handler
$('.button1').click(function () {
  // Start the mousemove effect
  isMousemoveActive = true;

  // Attach the mousemove event to the section
  $('section').mousemove(function (e) {
    if (isMousemoveActive) {
      // Apply parallax effect
      parallaxIt(e, ".d", -12.5);
      parallaxIt(e, ".bg", -3.75);
    }
  });
});

// Button 2 click handler
$('.button2').click(function () {
  // Stop the mousemove effect
  isMousemoveActive = false;

  // Detach the mousemove event from the section
  $('section').off('mousemove');

  // Reset the positions of .d and .bg elements
  resetPositions();
});

// Function to apply parallax effect
function parallaxIt(e, target, movement) {
  var $this = $('section');
  var relX = e.pageX - $this.offset().left;
  var relY = e.pageY - $this.offset().top;

  // Use TweenMax to smoothly apply the parallax effect
  TweenMax.to(target, 1, {
    x: (relX - $this.width() / 2) / $this.width() * movement,
    y: (relY - $this.height() / 2) / $this.height() * movement,
  });
}