Question

148

Jquery Opacity Fade In Out Loop

rated 0 times [ 150] [ 2] / answers: 1 / hits: 16018 / 12 Years ago, fri, october 5, 2012, 12:00:00

One of my clients asked me to make a blinking effect on a div. I think that might not be the best thing for him, maybe light fading in and out of opacity will get the attention of his customers, without annoying them.

I currently have

 <a class=special_button href=#>Special Offers &rsaquo;</a>

I have the following code for another div, which causes a fade in on browser load :

$('.logo-top').delay(700).animate({

     'opacity' : '1',        

     'top' : '+=40px'

}, { duration: 700, easing: 'swing' });

How would I do something similar for the special_button, but instead looping the opacity? From say 80 to 100?

It would even be better if it looped a certain amount of times, maybe like 5.

Best,
Stepan

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

soniap

Add To Favorites

Follow

Total Points: 626

Total Questions: 119

Total Answers: 110

Location: Palestine

Member since Tue, Jul 20, 2021

3 Years ago

soniap questions

1 Getting CAN_NOT_GET_GATEWAY_SERVER exception on joining a call

Tue, Oct 27, 20, 00:00, 4 Years ago

1 firestore Check if id exists against an array of ids

Mon, Jun 22, 20, 00:00, 4 Years ago

1 How to get sum of all Map values in javascript?

Fri, May 8, 20, 00:00, 4 Years ago

1 Javascript - How to unmute youtube videos in iframe

Fri, Mar 20, 20, 00:00, 4 Years ago

1 break says error: Jump target cannot cross function boundary. typescript

Wed, Jan 22, 20, 00:00, 4 Years ago

View All

answered 12 Years ago susanap · Accepted Answer

You probably want to have something like this jsFiddle.

And you can also indicate the number of times you want this to blink, just by keeping a counter.

Code from jsFiddle:

$(document).ready(function() {

     function runIt() {           

       var baloon = $('#baloon');

       baloon.animate({opacity:'1'}, 1000);

       baloon.animate({opacity:'0.5'}, 1000, runIt);

    }

    runIt();

});