Trouble with jQuery: Background color fade in/fade out effects not functioning

Issue with changing background color during FadeIn and FadeOut effect.

Whenever I click on the "whatup" link, my button should blink with alternating red and white colors. Below is the HTML code:

<a id="blkwhatsup" href="#" >whatup</a>
<input id="blkbtn" type="submit" value="2">

Below is the jQuery code where I have set up the blinking effect for the button. However, despite it blinking, the background color does not change as intended:

$('#blkwhatsup').click(function(e) {  
    interval = setInterval(function() { 
         $('#blkbtn').fadeOut({ backgroundColor: '#90191c',color:'#fff', border: '1px solid #90191c' }, 300) 
         $('#blkbtn').fadeIn( { backgroundColor:'#fff', color: '#90191c', border: '1px solid #90191c'}, 300); 
    }, 1000); 
});

Answer №1

Below is a great example that demonstrates the use of fadeOut and fadeIn for background colors.

$('#doit').on('click', function(e) {
    e.preventDefault();
    $('#fadeout-div').show().delay(500).fadeOut(1100);
});
#wrapping-div {
 height:200px;
 width:300px;
 border:1px solid #999;
 padding:1px 8px;
 background-color: #fff;
 position:relative;
 z-index:1;
}

#fadeout-div {
 height:100%;
 width:100%;
 background-color: #ffd700;
 position:absolute;
 top:0;
 left:0;
 z-index:-1
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p><a href="#!/doit" id="doit">fadeOut/fadeIn</a></p>

<div id="wrapping-div">
  <p>This is some text</p>
  <p>This is some text</p>
  <p>This is some text</p>
  <div id="fadeout-div"></div>
</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

Troubleshooting: HTML drop-down menu experiencing malfunctions

As a newcomer to the realm of HTML, I am eager to kickstart my online portfolio. After successfully setting up the navigation bar, I have now turned my focus towards creating a dropdown menu within the nav bar. Unfortunately, I've hit a roadblock as t ...

Grails array using jQuery autocomplete with findByAll() function

Hello everyone, I appreciate the assistance in advance! I am currently attempting to utilize Grails findByAll() in order to retrieve a list for use in the jQuery autocomplete feature found at this link: https://jqueryui.com/autocomplete/ I believe I am cl ...

How can JavaScript nested AJAX requests and promises be properly chained together?

I'm currently facing a dilemma when it comes to setting the correct order of execution for the tasks at hand. Let's say I need to initiate an AJAX call, then handle the data and store it in IndexedDB using the idb-keyval library, which operates o ...

Send a Symfony form between different views using ajax

I am currently working on creating a tabs navigation system with a central block that displays a Symfony form. Whenever I click on a tab link, I want to reload the block with the form and data related to that tab. The challenge I am facing is how to pass ...

Persistent change issue with JQuery CSS function

Looking for some help with a button-bar div that I want to display only after the user clicks on a "settings" button. Currently, I have set the button-bar div to have a display:none property in my css file. However, when the settings button is clicked, t ...

What is the best way to align an avatar within a cardHeader component in the center?

Recently, I've been working on a frontend project using Material UI. In my design, I have cards that display data, and I wanted to include an avatar in the center of each card. Despite using a card header to insert the avatar, I struggled to align it ...

Nested components knockout knockout knockout! The $(document).ready() function fires off before the nested component is even loaded

I am faced with a situation where I have multiple nested knockout components in my code: <component1> <component2> .... </component2> </component1> The issue here is that while component1 is custom-made by me, component2 ...

Ways to customize the hover effect for react-bootstrap navbar link

I'm looking to update the hover effect color from white to green, but I'm having trouble finding the correct CSS code for it. <Navbar fixed='top' collapseOnSelect expand="md" variant="dark" className="animate ...

Using AJAX for form submission and managing the response in a Wordpress site

I have a website built on Wordpress. I have created a contact form that is submitted using AJAX. Below is the code snippet: <script type="text/javascript"> jQuery(document).ready(function(){ $("#error_box").hide(); $('#contact_form&ap ...

I need assistance improving my poor JavaScript patterns and practices. Where should I turn for help?

After focusing primarily on back-end tasks for the past few years, it's become apparent to me that JavaScript (and CoffeeScript) projects have evolved significantly in my absence. Working mainly in a rails environment, my previous JavaScript/jQuery i ...

Reduce the identification number within a JSON array following the removal of an item

Within my local storage, I maintain a dynamic array. Each entry is accompanied by an ID that increments sequentially. If a user opts to delete an entry, it should be removed from the array while ensuring that the IDs remain in ascending order. For example: ...

Tips for creating a div that is consistently 80% of the page height and perfectly square

Sorry if this question seems a bit confusing, but I just can't seem to find the right words to explain it! What I'm trying to achieve is having a div element always be 80% of the height of the page, while also being perfectly square in shape. In ...

Div element positioned outside of another div element

I hate to bug you with more css issues, but I'm really struggling with this one. The problem I'm facing is that a sub div is overflowing the boundaries of its parent div. I tried using: display: inline-block;` but then the outer div goes haywir ...

Tips for incorporating form validation into a modal in ASP.NET MVC

My task involves designing a form within a modal window with one mandatory field. The user should be able to submit the form only after filling out the required field; if left empty, an error message must display. What is the best approach to implement t ...

Maximizing Efficiency on the Frontend: Balancing Requests with Caching

I am currently tackling a large website that has accumulated quite a bit of technical debt that needs to be addressed. The site contains a significant amount of JavaScript and CSS files being loaded. Currently, these files are aggregated and minified in la ...

Creating a sleek horizontal scrolling list with the least amount of rows using tailwindcss

Is there a way to create a 3-row list with horizontal scroll without the unwanted space between items? I've been using tailwindcss and grid to achieve this layout, but I'm encountering issues with spacing: https://i.stack.imgur.com/WeRyQ.png Cu ...

Guide to Utilizing an AJAX Call to Populate a Line Graph in Highcharts

I've been attempting to create a line graph using highcharts in asp.net, but I'm having trouble getting anything to show up on the chart. Here's the code I have so far: var chart; $(document).ready(function () { chart = new Hig ...

Lower the placement of Glyphicons

I have recently implemented a custom font on my website. Unfortunately, this font is not standard and its alignment is off. As a result, when I use this font with Twitter Bootstrap glyphicon, they do not appear in the same line. Is there a way to adjust t ...

Having trouble implementing styles for an element selected using the document.getElementsByClassName() method

In order to adjust the style of a dropdown menu, I need to change its top value to align it properly. The element is being generated by Drupal (a CMS tool) and is configured with classes for styling purposes in the admin view where content is authored. How ...

Can we dynamically apply a class to the body depending on the domain in the window's URL?

Currently, I am developing a website for a company that has operations in both New Zealand and Australia. They have domains pointed to the same website with both .co.nz and .com.au extensions. I have written the following code to assign the class "austral ...