Using ng-mouseover along with ng-if and an animated class causes issues

Whenever I hover over a link, it triggers a change in a variable value which then displays a <p> tag using ng-if. The code snippet looks like this:

<div class="position text-center" ng-mouseover="social=1" ng-mouseleave="social=-1">
        <a   href="#6thPage">something</a>
    </div>

Here is the ng-if section:

<div class="col-md-12 center-block text-center grey" ng-if="social == 1">
<p class="fadeInDown animated">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quibusdam ullam tenetur facilis cupiditate iusto laudantium, ex nobis.</p>
</div>

Everything works fine when I remove the fadeInDown and animated classes. However, as shown above, there's a slight flicker when I move my mouse over the link.

javascriptangularjsanimate.css

Answer №1

I encountered a similar issue when utilizing ng-if. However, I managed to resolve it by opting for ng-class instead. If you are facing the same problem, I recommend implementing the following solution:

  1. Start by setting your div, whose visibility needs to be toggled, to have display: none as its default state:

HTML:

<div class="col-md-12 center-block text-center grey hide-element">
<p class="fadeInDown animated">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quibusdam ullam tenetur facilis cupiditate iusto laudantium, ex nobis.</p>
</div>

CSS:

.hide-element {
    display: none;
}
  1. Next, create a class that you can apply to the div when 'social == 1':

CSS:

.show-element{
    display: block;
}
  1. Finally, implement an ng-class to toggle visibility using the 'show-element' class:

HTML:

<div class="col-md-12 center-block text-center grey" ng-class="{'show-element': social  == 1, 'hide-element': social != 1}">
<p class="fadeInDown animated">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quibusdam ullam tenetur facilis cupiditate iusto laudantium, ex nobis.</p>
</div>

By the way, are you utilizing animate.css in this setup?

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

What is the best way to achieve this particular grid layout using html and css?

I have a CSS grid of icons and I am trying to create a divider between each cell that fades in opacity towards the edges, similar to an airbrush effect. However, I want the cells themselves to remain transparent so that the background pattern is still visi ...

javascripthtmlcssreactjs

Show a button using CSS when the cursor is hovering

Expressing my gratitude to everyone! I need assistance with implementing a function in reactJS where the <button /> remains hidden during page loading and reveals itself when hovered over. Despite trying various methods, I have been unable to resolve ...

javascriptcssreactjsless

Displaying a preloaded image on the canvas

Once again, I find myself in unfamiliar territory but faced with the task of preloading images and then displaying them on the page once all elements (including xml files etc.) are loaded. The images and references are stored in an array for later retrie ...

javascripthtmlcanvas

Link a function to a button in a 3rd party library

Whenever I click a button, there is a possibility of an alertify alert window appearing randomly. The alertify alert popup serves as a more aesthetically pleasing alternative to the traditional javascript Alert. Alertify library Below is a snapshot depic ...

javascriptjqueryhtmlalertalertify

Tips for running a post-installation script when deploying an Angular 4 application to an Azure website using KuduScript

I recently faced an issue with my angular4 app deployed on azure web app (website) using Deployment Options through the Portal. To customize the deployment script, I utilized kuduscript [kuduscript -y –node] and modified deploy.cmd to specify how Azure s ...

angularjsnode.jsazureangular-cliazure-cli

Error encountered in a Node.js Express application: 'Error in Jade template (version 1.0+): The usage of duplicate key "id" is not permitted.'

Seeking guidance on the following issue: Within my Express app, I am providing numerous parameters to a Jade template, resulting in an error message that states: Duplicate key "id" is not allowed. (After reviewing, I have confirmed that there is no para ...

javascriptnode.jstemplatesexpresspug

Caution: Angular loaded multiple times due to jQuery dependency being higher

I am currently working on a Yeoman Angular project. Within this project, I have installed a module via Bower that has a dependency on jQuery. The issue arises when Grunt's wiredep places the jQuery dependency above AngularJS in the index.html: <!- ...

jqueryangularjsgruntjsbowergrunt-wiredep

Ways to remove a JSON item based on its index position?

In my JSON object, I am trying to find a way to remove the first element. Here is an example of what I have: var obj1 = {property:'something', does:'somethingElse', is:'somethingCool'}; var obj2 = {does:'somethingElse&ap ...

javascriptjson

Unique form validation directive tailored to your specific needs

My current challenge involves validating a number based on its minimum and maximum values using angularJS. Initially, I attempted to utilize the built-in max validation provided by AngularJS for input number validation. However, it only seemed to work with ...

angularjsangularjs-directive

Monitoring the modifications of a linked component in React: A guide

I am facing an issue where I need to store the text of a referenced element in an array. My goal is to first display the text of each paragraph element with the "ebookName" class in the console before storing it in the array. However, I have encountered a ...

javascripthtmlreactjs

Guide for Uploading, presenting, and storing images in a database column with the help of jQuery scripting language

What is the best method for uploading, displaying, and saving an image in a database using jQuery JavaScript with API calls? I am working with four fields in my database: 1. File ID 2. Filename 3. Filesize 4. Filepath ...

javascriptjqueryjsonajax

What other local variables can be passed into a controller in addition to the $scope variable?

Angular allows for dependencies to be injected, but it's important to note that injecting $scope into a directive doesn't work. Is there a definitive list available outlining what can be injected into controllers and what cannot? What about direc ...

angularjsdependency-injectionangular-directiveangular-controller

The appearance of HTML varies depending on the type of mobile device being used

My email template is having display variations on different mobile devices, with the textbox sometimes centered instead of left aligned as intended. Any suggestions on what might be causing this issue and how to resolve it? Desired Display on All Devices ...

javascripthtmlcssresponsive-design

Having trouble with the Typeahead feature in your AngularJs application?

Currently, I am experiencing an issue with my typeahead feature. Regardless of what I type, all suggestions are appearing without any filtering taking place. My intention is to have the suggestions filtered based on the initial letter typed by the user (fo ...

angularjstypeahead

Utilizing Core-TransitionEnd in Polymer: A Beginner's Guide

After a ripple animation on an item has executed, I would like to run a function. Currently, I am using the following code: <post-card id="card1"> <img width="70" height="70" src="../images/start.png"> <h2>P ...

javascripthtmlpolymer

Adjust the overall size of the CSS baseball field

Attempting to adjust the size of the baseball field proved challenging, as it wasn't a simple task. Is there a way to achieve this effectively? Thanks, HTML - is using DIV the only method for resizing? I couldn't find a way to resize everything a ...

javascripthtmlcssnode.jsresponsive-design

Turn a textfield on and off in real-time

Hey everyone, I've been working on making a textfield dynamic and I wanted to share my code with you: <input type="text" id="test1" value ="dynamic" onfocus="this.disabled=true" onblur="this.disabled=false"> <input type="text" id="test2 ...

javascriptjqueryhtmlcssonfocus

Using onChange input causes the component to re-render multiple times

As I delve into learning React, I've encountered some challenges. Despite thinking that I grasped the concept of controlled components, it appears that there's a misunderstanding on my end. The issue arises after an onChange event where I notice ...

javascriptreactjsmultiple-input

The Node function will yield a BluebirdJS Promise

I've encountered a minor issue with this script. While it functions properly, the "runTenant" method is not returning a promise that needs to be resolved with "all()". Here's the code snippet in question: Promise.resolve(runTenant(latest)).then ...

javascriptnode.jsbluebird

Can we invoke a function through Ajax?

Apologies for my lack of experience, I am just getting acquainted with Ajax. Please bear with me if my question seems unrefined. I attempted to do something, but unfortunately, I did not achieve success. Let me explain what I was trying to accomplish: I ...

javascriptphpjqueryajax