Ways to prevent image toggling when the mouse moves out of it or when the hover effect stops

Question

Ways to prevent image toggling when the mouse moves out of it or when the hover effect stops

I'm looking to toggle between two images on mouseover/hover and stop the toggling when hovering stops.

Here is the HTML code I have:

<div class="fader">
  <img src="image1" />
  <img src="image2" />
</div>

This is the JQuery code I'm using:

    $('.fader').hover(function() {
      toggleImage();
    });

function toggleImage() {
 if($('.fader').is(":hover")) {
  $('.fader').find("img").fadeToggle(1000);
  toggleImage();
 }
}

Some CSS for styling purposes:

.fader {
  display: inline-block;
}

.fader img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

The issue I'm facing is that I can't get the toggleImage() function to stop when the mouse is moved away or hovering stops.

I tried checking for :hover with the following code:

$('.fader').is(":hover")

But it didn't work as expected.

I need a way to stop the infinite loop of toggleImage() on mouseout or when hovering stops. Any suggestions?

If you need more help, check out this JSFiddle link.

javascript jquery css hover

Answer 1

Answer №1

Using only CSS:

* {
  margin: 0;
  padding: 0;
}
.fader {
  display: inline-block;
}
.fader img {
  transition: all .2s;
}
.fader img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.fader:hover img:first-child {
  animation: toggle .5s infinite alternate .5s;
}
.fader:hover img:last-child {
  opacity: 1;
  animation: toggle .5s infinite alternate;
}

@keyframes toggle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="fader">
  <img src="http://placehold.it/200x200/fff000" />
  <img src="http://placehold.it/200x200" />
</div>

Answer 2

Using only CSS:

* {
  margin: 0;
  padding: 0;
}
.fader {
  display: inline-block;
}
.fader img {
  transition: all .2s;
}
.fader img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.fader:hover img:first-child {
  animation: toggle .5s infinite alternate .5s;
}
.fader:hover img:last-child {
  opacity: 1;
  animation: toggle .5s infinite alternate;
}

@keyframes toggle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="fader">
  <img src="http://placehold.it/200x200/fff000" />
  <img src="http://placehold.it/200x200" />
</div>

Answer 3

Answer №2

If you want to achieve a toggling effect using JavaScript, you can utilize the functions setInterval and clearInterval as shown in the example below:

var toggleTimer;

$('.toggler').hover(function() {
  toggleTimer = setInterval(toggleContent, 1000);
}, function() {
  clearInterval(toggleTimer);
});

function toggleContent() {
  $('.toggler').find(".content").toggle(1000);
}

.toggler {
  display: block;
}

.toggler .content:last-child {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggler">
  <div class="content">Content A</div>
  <div class="content">Content B</div>
</div>

Answer 4

If you want to achieve a toggling effect using JavaScript, you can utilize the functions setInterval and clearInterval as shown in the example below:

var toggleTimer;

$('.toggler').hover(function() {
  toggleTimer = setInterval(toggleContent, 1000);
}, function() {
  clearInterval(toggleTimer);
});

function toggleContent() {
  $('.toggler').find(".content").toggle(1000);
}

.toggler {
  display: block;
}

.toggler .content:last-child {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggler">
  <div class="content">Content A</div>
  <div class="content">Content B</div>
</div>

Answer 5

Answer №3

Here is a way you can attempt:

  $('.fader').on('mouseover', function() {
        toggleImage();
    });

    function toggleImage() {
        $('.fader').find("img").fadeToggle(1000);
      //toggleImage(); //You can omit this line
    }

Answer 6

Here is a way you can attempt:

  $('.fader').on('mouseover', function() {
        toggleImage();
    });

    function toggleImage() {
        $('.fader').find("img").fadeToggle(1000);
      //toggleImage(); //You can omit this line
    }

Answer 7

Answer №4

let timer;
$('.fade-in-out').hover(function() {
    timer = window.setInterval(changeImage(), 2000);
});

function changeImage() {
     if($('.fade-in-out').is(":hover")) {
        $('.fade-in-out').find("img").fadeToggle(1000);
     } else {
        window.clearInterval(timer);
     }
};

Answer 8

let timer;
$('.fade-in-out').hover(function() {
    timer = window.setInterval(changeImage(), 2000);
});

function changeImage() {
     if($('.fade-in-out').is(":hover")) {
        $('.fade-in-out').find("img").fadeToggle(1000);
     } else {
        window.clearInterval(timer);
     }
};

Answer 9

Answer №5

To ensure the load effect in jQuery code works correctly, remember to include return false; after the function call.

$('.fader').hover(function() {
    toggleImage();
});

function toggleImage() {
$('.fader').find("img").fadeToggle(1000);
return false;
  toggleImage();
}

.fader { display: inline-block; }
.fader img:last-child {
    position: absolute;
    top: 0; 
    left: 0;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<div class="fader">
    <img src="http://placehold.it/300x300/000fff" />
    <img src="http://placehold.it/300x300/fff000" />
</div>

Answer 10

To ensure the load effect in jQuery code works correctly, remember to include return false; after the function call.

$('.fader').hover(function() {
    toggleImage();
});

function toggleImage() {
$('.fader').find("img").fadeToggle(1000);
return false;
  toggleImage();
}

.fader { display: inline-block; }
.fader img:last-child {
    position: absolute;
    top: 0; 
    left: 0;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<div class="fader">
    <img src="http://placehold.it/300x300/000fff" />
    <img src="http://placehold.it/300x300/fff000" />
</div>

Ways to prevent image toggling when the mouse moves out of it or when the hover effect stops

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Navigating through a JSON object in JavaScript by employing regular expressions

Delete the float attribute from the image when the inline-block is shifted to the bottom of the image

I encounter difficulties using my static resources in the root route of my Express.js application

React's Conditional Rendering

Converting a table into div elements and subsequently reverting it back to its original table format

Tips for showcasing all values in a nested array

Using ion-icon inside a clickable ion-card while applying float: right does not render properly

Filtering JSON data using jQuery

Dynamically populate select options using Spring Boot Ajax technology

Tips for updating the current image in the control navigation of the flexslider

Is the utilization of the React context API in NextJS 13 responsible for triggering a complete app re-render on the client side

Array of dynamically typed objects in Typescript

Leverage Bootstrap 4 for achieving flexible layouts and centering content with two elements using flex and justify-content

What could be the reason for the undefined initial state in my vuex store?

Display/Conceal content with JQuery on a PHP webpage

Tips for utilizing the for each function within a for loop

How to Align a Footer to the Bottom of the Page using Bootstrap 5

Error: Trying to access the 'title' property of an undefined variable in Vue.js

Sharing information between controllers in OnsenUI using AngularJS and PhoneGap

Substitute for SendKeys() in Angular JS web pages using Selenium