The animated color web icon font is not functioning on Internet Explorer 8

I'm feeling lost with this issue. I am trying to animate the color of an icon font, and it's working smoothly in all modern browsers except for IE 8!

Here is the link I am working with:

<a id="newsletter_subbut"><i class="icon-web-mail"></i></a>

This is the CSS code I have written:

#newsletter_subbut {
    border: none;
    height: 30px;
    width:40px;
    margin-left: -8px;
    font-size:22px;
    position:absolute;
    display:inline-block;
    padding-top:9px;
    bottom:0px;
    z-index: 1;
}
.icon-web-mail:before {
    font-family: 'batch';
    speak: none;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    content: "\F14C";
}

And here is the jQuery code I am using:

$('#newsletter_subbut').find("i").stop().animate({color: "#fa2a18"},'slow');
jqueryhtmlcssjquery-animate

Answer №1

Due to limitations in IE8, the browser is unable to animate colors on its own. To achieve color animation in IE8, a custom script is necessary.

@Hadi has introduced a lightweight custom color animation script as a solution.

In my opinion, using jQuery UI will provide the desired effect. I have included it in my jsfiddle (refer to framework and extensions). http://jsfiddle.net/brutusmaximus/667kF/6/

$('#newsletter_subbut').find("i").stop().animate({color: "#fa2a18"},'slow');

An update suggests adding the icon with 

i:before { content: \F14C"; }

The jQuery is animating the actual "i" element of the content ":before". However, research indicates that animating pseudo classes is not yet supported.

http://css-tricks.com/transitions-and-animations-on-css-generated-content/

A solution exists, but it is only compatible with modern browsers.

Your best option is to include the unicode in the HTML. Refer to my http://jsfiddle.net/brutusmaximus/667kF/8/

Answer №2

Uncertain of the jQuery version you have, but it seems that animate color doesn't function with 1.9.1; it may work with earlier versions. In some cases, IE8 may not recognize the animate property. You could attempt this method:

$('#newsletter_subbut').find("i").stop().animate({color: "#fa2a18"}, 1000, function(){ $('#newsletter_subbut').find("i").animate({ color: "#fa2a18" }); });

or

$('#newsletter_subbut').find("i").animate({ color: "#000" }); // revert to original color
$('#newsletter_subbut').find("i").animate({ color: "#fa2a18" });

It might seem a bit unconventional, but it has worked for me.

If you happen to be using jQuery 1.9.x, give this fiddle a shot - http://jsfiddle.net/HETuE/ - it appears to also function on ie8.

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

Code for a regular expression that permits either letters or numbers with symbols

Here is the code snippet I am using for data validation in jQuery: return /^(?=.*[A-Za-z0-9/\$#.-_])[A-Za-z0-9/\$#.-_]$/i.test(value) The requirement is that the value should begin with letters or numbers, or a combination of both. Afterwards, ...

javascriptjqueryregex

Creating a system to add and limit dynamic fields with a counter in jQuery

Check out this fiddle link http://jsfiddle.net/gKJEs/80/ I'm looking for a way to limit the number of rows that can be added, let's say up to 5. Here is the HTML code: <table id="table"></table> <button id="addRowBtn">Add Ro ...

javascriptjquery

Eliminate unnecessary HTML elements in Angular

I am currently using ngSwitchCase for 3 different cases, and I have noticed that I am duplicating the same code inside each case. Is there a way to eliminate this redundancy? The redundant code is located within the "app-device" component <div *ngS ...

htmlangularredundancy

Is it possible to eliminate the border of an HTML element when clicked, while still keeping the border intact when the element is in

I am currently developing a project with an emphasis on Web accessibility. Snippet of Code: function removeBorder(){ li=document.getElementById("link"); li.classList.add(".remove") } body{ background:#dddddd; } p:focus{ border:1px solid red; } li{ ...

javascripthtmlcss

Why is it necessary to use '!important' to change the color of my navbar?

Hey there! I'm diving into the world of bootstrap, CSS, and HTML for the first time and I'm looking to spice up my navbar by changing the text color. However, I want to achieve this without resorting to the use of "!important". Take a look at my ...

htmlcssbootstrap-4

Solving Problems with Image Placement using CSS

As I embark on learning responsive CSS, the concept is still quite new to me. One issue I'm facing is the alignment of the images on the second row in comparison to the top images. I aim to have 4 images per row, with the flexibility for the image siz ...

cssimage

Instructions on how to insert a hyperlink into the information within the generated div utilizing an API

Currently, I am fetching information from an API based on the user's input (zipcode). The data retrieved includes the name of the institution, address, and webpage. I've been trying to make the webpage link clickable by adding a hyperlink to the ...

javascriptjqueryajaxapi

Images featuring a drop-down menu

I'm having trouble separating the two photos on this page. When I hover over one, the other also fades in. Additionally, the text box is overlapping the first photo. My goal is to have a total of 6 photos on the page, each with a dropdown list contain ...

html

Ending an $.ajax request when the page is exited

Currently, I have a function set on a timer to retrieve data in the background: (function fetchSubPage() { setTimeout(function() { if (count++ < pagelist.length) { loadSubPage(pagelist[count]); fetchSubPage(); ...

javascriptjquery

Trigger the jQuery Mobile panel menu with a tap on the Android device's native menu button through the utilization of PhoneGap

I am currently in the process of developing an Android app using Jquery Mobile/Phonegap. The main objective is to control the phone's menu button with the following code: <script type="text/javascript" charset="utf-8"> // Execute onDevice ...

javascriptandroidjqueryjquery-mobilecordova

Changing Image to Different File Type Using Angular

In my Angular Typescript project, I am currently working on modifying a method that uploads an image using the input element of type file. However, I no longer have an input element and instead have the image file stored in the assets folder of the project ...

javascripthtmlangulartypescript

Is there a way to trigger the onclick event while dragging the div?

Exploring a Div: <div id="up" onmousedown="handleMouseDown('url(/scanToUserBox/img/cpt_subfunc_005_prev_p.png)', this)" onclick="changePage('up')"> </div> Upon clicking the div, the onmousedown event is trig ...

javascripthtmljsp

When you add the /deep/ selector in an Angular 4 component's CSS, it applies the same style to other components. Looking for a fix?

Note: I am using css with Angular 4, not scss. To clarify further, In my number.component.css file, I have: /deep/ .mat-drawer-content{ height:100vh; } Other component.css files do not have the .mat-drawer-content class, but it is common to all views ...

htmlcssangularjsangularangular-material2

Choose a dynamically generated html element without having to click on it

I've been looking for a way to target a dynamically-generated element (specifically a div with the class "date") using jQuery. While I keep finding references to the .on('click') method, it appears that this only selects the div once the pag ...

javascriptjqueryhtml

Toggle the input box by clicking the button

How do I show or hide the input box (blue square) when I click the search button (red square)? Link Image I attempted to create the transition in CSS and also experimented with JavaScript, but the JavaScript part confused me. Here is what I tried: $(" ...

javascripthtmlcsstransition

Designing a rounded border radius for various child elements within a layout

I am currently working on creating a circular container that houses an image and a description overlaid at 50% opacity. Here is what I have achieved so far: https://i.stack.imgur.com/pIkO1.png My goal is to apply a uniform border-radius to the entire div ...

htmlcssreactjs

Showing a loading animation whenever the date picker's selected date is changed

My Laravel application showcases various statistics to users. Within my front-end blade, I have set up multiple widgets, each displaying a specific stat. The widget below showcases the total number of orders. <div class="row mt-3" id="sh ...

javascriptphpjqueryajaxlaravel

How to send an email with an attachment using Codeigniter while utilizing PHP's mail function

I`m currently using the simple php mail() function to send emails in Codeigniter 2.1.2 with Bootstrap 2.3.2 and jQuery validation. It has been working well for me, but now I need to add an "attachment" field. I know that Codeigniter has its own email class ...

phpjquerycodeigniteremailtwitter-bootstrap

Multi-Slide AngularJS Carousel

My current setup includes a carousel like so: <div> <carousel id="myC" interval="3000" > <slide ng-repeat="order in orders"> <img ng-src="whatever.jpg" style="margin:auto;"> <div ...

javascriptjqueryangularjstwitter-bootstrapcarousel

Nested Tables in JavaScript: Creating Tables within Tables

Recently, I have been analyzing student data and noticed a recurring structure. While preparing to present information on student performance within the discipline, I also became interested in showcasing a history of new students. It was suggested that hav ...

javascriptcsstreeviewsyncfusiontreetable