Troubleshooting multiple element visibility problems with jQuery

Please take a look at the code snippet below.

$(document).ready(function(){
 $(".like-btn").hover(function() {
  var rowid = $(this).attr("data-rowid");
  $(".reaction-box[data-rowid='" + rowid + "']").fadeIn(100, function() {
    $(".reaction-icon").each(function(i, e) {
      setTimeout(function(){
        $(e).addClass("shows");
      }, i * 100);
    });
  });
}, function() {
  var rowid = $(".like-btn").attr("data-rowid");
  setTimeout(function(){
    $(".reaction-box[data-rowid='" + rowid + "']").fadeOut(300, function(){
      $(".reaction-icon").removeClass("shows")
    })
  }, 500);
});
});
.feed .like-btn {
        width: 44px;
        height: 25px;
        background: #D0D0D0;
        position: absolute;
        bottom: 13px;
        left: 13%;
        top: 10%;
        cursor: pointer;
      }
      .feed .like-btn::before {
        content: ".";
        opacity: 0;
        display: block;
        width: 44px;
        height: 10px;
        position: absolute;
        top: -10px;
        left: 0;
      }
      .feed .like-btn .reaction-box {
        position: absolute;
        width: 155px;
        height: 55px;
        background: #FFF;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        border-radius: 28px;
        left: -25px;
        bottom: 35px;
        display: none;
      }
      .feed .like-btn .reaction-box .reaction-icon.angry {
        animation: fadeInLoad-angry 0.3s;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        background-position: 0px 0px;
      }
      .feed .like-btn .reaction-box .reaction-icon.flower {
        animation: fadeInLoad-flower 0.3s;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        background-position: 0px -40px;
      }
      .feed .like-btn .reaction-box .reaction-icon.haha {
        animation: fadeInLoad-haha 0.3s;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        background-position: 0px -80px;
      }
      .feed .like-btn .reaction-box .reaction-icon.like {
        animation: fadeInLoad-like 0.3s;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        background-position: 0px -120px;
      }
      .feed .like-btn .reaction-box .reaction-icon.love {
        animation: fadeInLoad-love 0.3s;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        background-position: 0px -160px;
      }
      .feed .like-btn .reaction-box .reaction-icon.sad {
        animation: fadeInLoad-sad 0.3s;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        background-position: 0px -200px;
      }
      .feed .like-btn .reaction-box .reaction-icon.wow {
        animation: fadeInLoad-wow 0.3s;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        background-position: 0px -240px;
      }
      .feed .like-btn .reaction-box .reaction-icon {
        display: inline-block;
        width: 40px;
        height: 40px;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAFXCAYAAAALR...
        background-size: cover;
        border-radius: 20px;
        margin: 8px -1px 0 8px;
        text-align: center;
        pointer-events: none;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        opacity: 0;
        transform: translate(0, 100px) scale(0);
      }
      .feed .like-btn .reaction-box .reaction-icon label {
        padding: 3px 5px 3px 5px;
        position: relative;
        top: -24px;
        border-radius: 10px;
        font-size: 11px;
        color: #FFF;
        background: #333;
        visibility: hidden;
      }
      .feed .like-btn .reaction-box .reaction-icon.shows {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        pointer-events: auto;
      }
      .feed .like-btn .reaction-box .reaction-icon:hover {
        transform: scale(1.4);
        transform-origin: bottom;
      }
      .feed .like-btn .reaction-box .reaction-icon:hover label {
        visibility: visible;
      }
      .feed .like-btn:hover {
        background: #718C00;
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="feed">
  <a class="like-btn" data-rowid="1"> Hover
    <div class="reaction-box" data-rowid="1">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
  <a class="like-btn" style="margin-top: 50px" data-rowid="2"> Hover
    <div class="reaction-box" data-rowid="2">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
  <a class="like-btn" style="margin-top...

The given code has some issues that need to be addressed. When hovering over a button, the reactions appear but do not disappear when moving the cursor away from the button. Additionally, if multiple buttons are hovered simultaneously, the animations trigger for all reaction boxes. The desired behavior should be simple: hovering over a button should display its specific reaction, and it should hide when the cursor moves away. This functionality is similar to Facebook's reactions. Furthermore, on mobile devices, the reactions show up on tap, but they should appear on button press (similar to Facebook).

javascriptjqueryhtmlcssjquery-ui

Answer №1

When fetching the rowid for fadeout using 

var rowid = $(".like-btn").attr("data-rowid");
, it will always return 1 because you are explicitly referring to .like-btn. To properly fetch the hovered rowid, you need to modify it as 
var rowid = $(this).attr("data-rowid");
.

$(document).ready(function() {
  $(".like-btn").hover(function() {
    var rowid = $(this).attr("data-rowid");
    $(".reaction-box[data-rowid='" + rowid + "']").fadeIn(100, function() {
      $(".reaction-icon").each(function(i, e) {
        setTimeout(function() {
          $(e).addClass("shows");
        }, i * 100);
      });
    });
  }, function() {
    var rowid = $(this).attr("data-rowid");
    setTimeout(function() {
      $(".reaction-box[data-rowid='" + rowid + "']").fadeOut(300, function() {
        $(".reaction-icon").removeClass("shows")
      })
    }, 500);
  });
});
.feed .like-btn {
  width: 44px;
  height: 25px;
  background: #D0D0D0;
  position: absolute;
  bottom: 13px;
  left: 13%;
  top: 10%;
  cursor: pointer;
}

.feed .like-btn::before {
  content: ".";
  opacity: 0;
  display: block;
  width: 44px;
  height: 10px;
  position: absolute;
  top: -10px;
  left: 0;
}
/* Additional CSS code included for reference */


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="feed">
  <a class="like-btn" data-rowid="1"> Hover
    <div class="reaction-box" data-rowid="1">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
  <a class="like-btn" style="margin-top: 50px" data-rowid="2"> Hover
    <div class="reaction-box" data-rowid="2">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
  <a class="like-btn" style="margin-top: 100px" data-rowid="3"> Hover
    <div class="reaction-box" data-rowid="3">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
  <a class="like-btn" style="margin-top: 150px" data-rowid="4"> Hover
    <div class="reaction-box" data-rowid="4">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
</div>

Answer №2

An interesting CSS-only method to achieve an effect utilizing the :hover pseudo-class for visibility control. Additional refinement using transitions could enhance the animation further.

.feed .like-btn {
  width: 44px;
  height: 25px;
  background: #D0D0D0;
  position: absolute;
  bottom: 13px;
  left: 13%;
  top: 10%;
  cursor: pointer;
}

.feed .like-btn::before {
  content: ".";
  opacity: 0;
  display: block;
  width: 44px;
  height: 10px;
  position: absolute;
  top: -10px;
  left: 0;
}

.feed .like-btn .reaction-box {
  position: absolute;
  width: 155px;
  height: 55px;
  background: #FFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 28px;
  left: -25px;
  bottom: 35px;
  display: none;
}
/* The rest of the CSS styling code remains as before */

Answer №3

Perhaps you could consider updating your jQuery with the following code snippet:

$(document).ready(function(){
 $(".like-btn").each(function(){
    $(this).on({
    'mouseenter': function(e) {
        e.preventDefault();
        $(this).find(".reaction-box").fadeIn(100, function(){

             $(this).find(".reaction-icon").each(function(i, e) {
            setTimeout(function(){
              $(e).addClass("shows");
            }, i * 100);
          });


            }
            )
 },
      'mouseleave': function(e){
            e.preventDefault();
          var el;
            $(this).find(".reaction-icon").each(function(i, e) {
            if(i == 0){
                el = $(this).closest('.reaction-box').attr('data-rowid');
            }
            setTimeout(function(){
              $(e).removeClass("shows");
            }, i * 100);
          });

           setTimeout(function(){
            $('.reaction-box[data-rowid="' + el + '"]').fadeOut(50);
          }, 400);
         }
});
});
});

Check out this fiddle for more: jsfiddle

Answer №4

To simplify your selector, consider using this in it. For instance, $(".reaction-box", this) will target the element with that class within this. Similarly, you can also achieve the same effect with $(this).find(".reaction-box").

Here is a working example:

$(function() {
  $(".like-btn").hover(function(e) {
    $(".reaction-box", this).fadeIn(100, function() {
      $(".reaction-icon", this).each(function(i, e) {
        setTimeout(function() {
          $(e).addClass("shows");
        }, i * 100);
      });
    });
  }, function(e) {
    $(".reaction-box", this).fadeOut(800, function() {
      $(".reaction-icon", this).removeClass("shows")
    });
  });
});
.feed .like-btn {
  width: 44px;
  height: 25px;
  background: #D0D0D0;
  position: absolute;
  bottom: 13px;
  left: 13%;
  top: 10%;
  cursor: pointer;
}

.feed .like-btn::before {
  content: ".";
  opacity: 0;
  display: block;
  width: 44px;
  height: 10px;
  position: absolute;
  top: -10px;
  left: 0;
}

.feed .like-btn .reaction-box {
  position: absolute;
  width: 155px;
  height: 55px;
  background: #FFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 28px;
  left: -25px;
  bottom: 35px;
  display: none;
}

.feed .like-btn .reaction-box .reaction-icon.angry {
  animation: fadeInLoad-angry 0.3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  background-position: 0px 0px;
}
/* CSS truncated for brevity */

.feed .like-btn:hover {
  background: #718C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="feed">
  <a class="like-btn" data-rowid="1"> Hover
    <div class="reaction-box" data-rowid="1">
      <div class="reaction-icon like">
        <label>Like</label>
      </div>
      <div class="reaction-icon love">
        <label>Love</label>
      </div>
      <div class="reaction-icon haha">
        <label>Haha</label>
      </div>
    </div>
  </a>
  /* Additional anchor tags and reaction boxes here */
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Something went wrong with the API: an error occurred where headers were sent to the client before they could be set

Recently, I've encountered an issue where users are facing errors during registration or login. The error message pops up occasionally and here is a screenshot of it: https://i.sstatic.net/zum1u.png Below is the code snippet that I'm using: htt ...

javascriptnode.jsmongodbbcrypt

Unable to apply inset box-shadow to image

I've added a box-shadow to my image. box-shadow: 0 0 10px RED inset However, the shadow is not showing up on the image. When I use Firebug to change the image path, I can see that the shadow is behind the image. How can I apply the shadow directly ...

htmltwitter-bootstrapcss

Is it considered good practice to make a POST request within a GET request?

Is it considered good practice to make a POST request while also making a GET request in my app? Or is this frowned upon? In my application, the functionality works like this: when the page loads, it needs to retrieve user data. If the user data is not fo ...

javascriptnext.js

How to integrate angular-ui-bootstrap with webpack

I'm attempting to integrate https://github.com/angular-ui/bootstrap with Webpack: import angular from 'angular'; import uiRouter from 'angular-ui-router'; import createComponent from './create.component'; import tabs fro ...

javascriptangularjswebpackangular-ui-bootstrap

The issue of the highlighted row not disappearing persists even after clicking on the adjacent table row

When selecting the gear icon for the menu option in a table row, I would like the background to turn yellow. I attempted the following code to highlight the table row: var view = Core.view.Menu.create({ model: model, menuContext: { ibmm: ibmm }, ...

javascriptjquerycssember.jsember-1

"Learn the method of selecting an item from an Asp CheckBox List using an AJAX call with jQuery

I am currently utilizing an Asp Check Box List for the multi-selection of items. The Check box list is being bound on the server side during page load, and I am attempting to check selected items via an AJAX call. My web method returns PlantCode and UserID ...

jquery

In JavaScript, merging objects will exclusively result in an identifier being returned

When working with mongoose, I have encountered an issue where combining data from multiple finds only displays the id instead of the entire object. Interestingly, when I use console.log() on the object directly, it shows all the contents. Below are snippe ...

javascriptnode.jsmongodbmongoose

I'm trying to understand why the combination of boostrap 5 mx-auto d-block is not effectively centering a fluid image. Can anyone

My code seems to be very simple, yet I am puzzled as to why it is not working. I have removed any external CSS from the page that could potentially cause interference, but the image still refuses to center inside my column. I have searched extensively and ...

htmlbootstrap-5

Schedule Master: A sophisticated tool for time management

I have been following the instructions to implement a date time picker from this tutorial. I downloaded the necessary js and css files and placed them in the respective directories. However, when I click on the calendar icon, the calendar does not pop up. ...

javascripthtmlcsstwitter-bootstrap

Utilizing JavaScript within Live Cycle Designer

Looking for a solution to streamline the process of selecting TV channels for sales reps. We have around 150 options, but the reps only need to choose from a list of 50. The selected channels must then be displayed on another page in alphabetical order. ...

jquerylivecycle

Tips for arranging 3 tables in the right place using CSS

I have 3 tables that I utilize. My goal is to: have one on the left side of the page place one in the center of the page position one on the right side All at the same height. The issue arises when the tables expand and using float causes them to ...

htmlcsshtml-table

The basic AJAX does not seem to be functioning

Exploring the world of ajax, I'm having trouble with the following code: $(document).ready(function() { $("button").click(function() { $.post("\tests\test1.php", function(data) { alert(data) }); }) }) <script src="htt ...

jqueryajax

Struggling with making an Ajax and Jquery drop down menu work? Wondering how to use Javascript to retrieve a variable and then utilize it in PHP? Let's troubleshoot

Currently, I am utilizing Ajax/Jquery to present a dropdown menu with data retrieved from my SQL database. The process involves using javascript to obtain a variable that is then utilized in PHP. However, the function doesn't seem to be working as exp ...

javascriptphpjqueryhtmlajax

Swapping out a code snippet within an HTML document using JavaScript

As a new member of this community, I present to you my very first problem that needs solving. It might be a piece of cake for some of you, but for me, it's proving to be quite tricky. The task at hand involves replacing or removing a string to make ev ...

javascripthtmlnotepad++

retrieve information in json format from a specified web address

I need to figure out why the data from a specific URL is not being displayed properly on my node application. It seems like there might be an error in my code. const extractRefDefaultSchema = async (data) => { const url = "https://mos.esante.gouv.f ...

javascriptnode.jsjsonexpresstry-catch

jQuery unable to find designated elements in uploaded templates

I have a specific route linked to a specific controller and view: app.config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/create', { templateUrl: 'partials/form/form.html', controlle ...

javascriptjqueryangularjs

Issue with scrolling feature in div

I am currently facing an issue with scrolling on my website. Visit this site to see the problem. When scrolling down, it causes the "hidden" part of the site to slide up. I want to achieve a similar sliding effect, but it needs to be smooth. I have attempt ...

javascriptjqueryhtmlcss

Troubleshooting JavaScript for Sidebar Disappearance due to marginRight and display CSS Issue

I need to adjust the layout of my website so that the sidebar disappears when the window is resized below a certain width, and then reappears when the window is expanded. Here is the HTML code: <style type="text/css"> #sidebar{ width:290 ...

javascriptjquerycsshidesidebar

Error in NodeJS: 'Cannot alter headers once they have been sent.'

My project involves developing an app with Express that fetches tweets from Twitter. Each API call retrieves 200 tweets (or fewer if there are less than 200) and in total, I need to retrieve 1800 tweets. To achieve this, I use a time interval to make multi ...

javascriptnode.jsexpress

Displaying content conditionally in Vue JS upon the initial page load

I am currently working on a Vue component that is supposed to render the first time a page is opened. However, I am facing some confusion regarding the logic behind this. My approach involves using localStorage to check for an item called 'wasVisited& ...

javascriptvue.js