What methods can be used to pause a jQuery function when hovering and resume it when the mouse leaves?

Question

What methods can be used to pause a jQuery function when hovering and resume it when the mouse leaves?

I'm currently working on a jQuery function that operates on the mousemove event. The goal is to have two images - one main image and one shadow image, with the shadow image reflecting movement based on mouse position. While everything is functioning properly, I am looking for a way to pause the mousemove event when hovering over the main image, only to resume once the mouse is released from the image. Is there a method to achieve this? You can visit the project at this link -

HTML

<div style="width:100%">
<img id="shadow-img" style="position:absolute;"src="./assets/img/slsshadow.jpg"></img>
<img id="center-img" style="position:absolute;left:50%;top:50%;margin-left:-204px;margin-top:-204px" src="./assets/img/slslogo.jpg"></img>
</div>

jQuery

(function() {
    var shadowImg = document.getElementById('shadow-img');
    var centerImg = document.getElementById('center-img');
    document.onmousemove = handleMouseMove;

    function handleMouseMove(event) {
        var center = {
            x : centerImg.getBoundingClientRect().left + 204,
            y : centerImg.getBoundingClientRect().top
        };

        var shadowPos = {
            x : (1.8 * center.x) - event.pageX,
            y : (2.2 * center.y) - event.pageY,
        };

        shadowImg.style.transform = 'translate(' + shadowPos.x + 'px,' + shadowPos.y +'px)';
    };
})();

javascript html css

Answer 1

Answer №1

Below is the code in action (if I understood your request correctly):

(function() {
    var shadowImg = document.getElementById('shadow-img');
    var centerImg = document.getElementById('center-img');
    document.addEventListener("mousemove", handleMouseMove);
    centerImg.addEventListener("mouseenter", function() {
        document.removeEventListener("mousemove", handleMouseMove);
    });
    centerImg.addEventListener("mouseleave", function() {
        document.addEventListener("mousemove", handleMouseMove);
    });
    function handleMouseMove(event) {
        var center = {
            x : centerImg.getBoundingClientRect().left + 204,
            y : centerImg.getBoundingClientRect().top
        };
        console.log(center);
        var shadowPos = {
            x : (1.8 * center.x) - event.pageX,
            y : (2.2 * center.y) - event.pageY,
        };

        shadowImg.style.transform = 'translate(' + shadowPos.x + 'px,' + shadowPos.y +'px)';
    };
})();

No changes were made to the HTML. You can also view it on JSFiddle here: http://jsfiddle.net/wbkdrdpk/2/

Explanation:

To assign events, I used addEventListener like so:

document.addEventListener("mousemove", handleMouseMove);

This achieves the same result as your line of code, but offers the advantage of being able to remove the handler using removeEventListener

I then added two event listeners to the image for removing and re-adding the move handler:

centerImg.addEventListener("mouseenter", function() {
     document.removeEventListener("mousemove", handleMouseMove);
});
centerImg.addEventListener("mouseleave", function() {
     document.addEventListener("mousemove", handleMouseMove);
});

Pretty straightforward.

Edit: I removed any jQuery code as you weren't utilizing jQuery despite tagging your question with it. The tag has been removed as well to avoid confusion ;)

Answer 2

Below is the code in action (if I understood your request correctly):

(function() {
    var shadowImg = document.getElementById('shadow-img');
    var centerImg = document.getElementById('center-img');
    document.addEventListener("mousemove", handleMouseMove);
    centerImg.addEventListener("mouseenter", function() {
        document.removeEventListener("mousemove", handleMouseMove);
    });
    centerImg.addEventListener("mouseleave", function() {
        document.addEventListener("mousemove", handleMouseMove);
    });
    function handleMouseMove(event) {
        var center = {
            x : centerImg.getBoundingClientRect().left + 204,
            y : centerImg.getBoundingClientRect().top
        };
        console.log(center);
        var shadowPos = {
            x : (1.8 * center.x) - event.pageX,
            y : (2.2 * center.y) - event.pageY,
        };

        shadowImg.style.transform = 'translate(' + shadowPos.x + 'px,' + shadowPos.y +'px)';
    };
})();

No changes were made to the HTML. You can also view it on JSFiddle here: http://jsfiddle.net/wbkdrdpk/2/

Explanation:

To assign events, I used addEventListener like so:

document.addEventListener("mousemove", handleMouseMove);

This achieves the same result as your line of code, but offers the advantage of being able to remove the handler using removeEventListener

I then added two event listeners to the image for removing and re-adding the move handler:

centerImg.addEventListener("mouseenter", function() {
     document.removeEventListener("mousemove", handleMouseMove);
});
centerImg.addEventListener("mouseleave", function() {
     document.addEventListener("mousemove", handleMouseMove);
});

Pretty straightforward.

Edit: I removed any jQuery code as you weren't utilizing jQuery despite tagging your question with it. The tag has been removed as well to avoid confusion ;)

What methods can be used to pause a jQuery function when hovering and resume it when the mouse leaves?

Answer №1

Similar questions

apply a visible border to the item that is clicked or selected by utilizing css and vue

What is the method for accessing an image in JavaScript?

Adding a listener to an element within a loop

Difficulty reloading after updating input using AngularJS ngTable

"Is there a way to extract text enclosed within HTML tags, such as <div>text</div>, with Selenium using C#

Tips for validating and retrieving data from a radio button paired with an input box in reactjs

Module.exports causing keyword errors in eslint

Is it possible to remove Sprites from a three.js scene?

How can the <animate /> tag be triggered using only CSS and HTML?

Creating a dynamic columns property for Mat-Grid-List

Content in Slider Exceeding Container Bounds

Transmitting HTML5 application settings via URL

Use ajax to load the script

What is the best way to ensure that two div elements within a list element fully utilize the available width on a webpage?

Is it possible to toggle all parent targets in Bootstrap?

Synchronizing Vuetify Carousel with dynamic route parameters

What are the best practices for utilizing AngularJS's $sanitize service?

Guide on bringing in Javascript file into your Ionic/Angular application

What are some methods to secure my API keys within my React application?

Issue with the MUI Autocomplete display in my form