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

Assigning the style of the parent element based on the child element

How AngularFire automatically adds back a removed item in a Firebase array

Tips for navigating to an element with Nightwatch

Exploring object properties within arrays and nested objects using ReactJS

Merge arrays values with Object.assign function

The method continues to receive null values from Ajax despite successfully retrieving the data from Facebook

Can you identify the mistake in this jQuery script?

"Uncaught ReferenceError: $ is not defined in a JavaScript/Vue.js

Ways to stop users from inputting incorrect characters into an input field

What is the method to individually determine "true" or "false" using .map() in coding

NextRouter does not have a property called "refresh"

Enhancing the Appearance of Legends in Chartjs

Revamping Legacy React Native Projects with the Redux Toolkit

What is the maximum size allowed for a background image in CSS?

What is the best way to spin an element around its center?

The module specifier "logrocket" could not be resolved, make sure to use either npm or

Unable to manipulate or customize the V-slot component

Uncertain about the distinction between reducers and dispatchers when it comes to handling actions

Asynchronous NestJs HTTP service request

Tips for adjusting the size and position of these div containers