Lively discussions on the graphic arts and publishing — in print or on the web

Go Back   Desktop Publishing Forum > General Discussions > Web Site Building & Maintenance

Thread Tools Display Modes
Prev Previous Post   Next Post Next
Old 02-21-2018, 01:31 PM   #1
CarlSeiler's Avatar
Join Date: Oct 2005
Location: Denton, TX
Posts: 280
Default Highlighting text based on event


I want an event to trigger text to immediately change to red and bold, then slowly transition back to the original formatting.

I'm using Bootstrap 3 and jQuery. To do this, my idea was to have two different classes. One .highlighted and one normal (in this case .infonumber). The classes are formatted using CSS:

   color: #F33 !important;
   font-weight: bold !important;
  color: #33F;
  font-weight: normal;
  transition: all 3s linear;
The idea is that when I change the span to .highlighted it snaps to red, and when it is changed back to .infonumber, it transitions back using the 3s linear. Unfortunately, it doesn't appear to do anything at all. I thought maybe this was because the change back to infonumber class was happening too fast, so I tried chaining a promise in there. That doesn't help. However, if I stick something in there that stops the process (like an alert), it is clearly changing to red/bold correctly, then changing back.

This CodePen https://codepen.io/lcarlseiler/pen/eVMjym shows how it currently does not work. This CodePen https://codepen.io/lcarlseiler/pen/qxoLmo shows how it works when I insert an alert in there to break it up.

I hope you understand the effect I'm looking for.

Question is, do I need to be using something else, like jQuery's animate() and a callback? or do I need to be making this simpler?
CarlSeiler is offline   Reply With Quote

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Yellow felt pens for highlighting text Andrew B. General Publishing Topics 25 02-03-2008 11:14 PM
Monthly Event Calendar dthomsen8 Web Site Building & Maintenance 5 02-14-2007 05:01 AM
Topic Based design dacoyle Web Site Building & Maintenance 10 12-01-2005 08:25 PM

All times are GMT -8. The time now is 06:52 PM.

Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Contents copyright 2004–2018 Desktop Publishing Forum and its members.