• 0

[jQuery] Pulsing Background


Question

Have a look at this web page:

post-15711-12702565571856.png

It's made from the following 2 graphics:

post-15711-12702565665362.png

What I'd like to do is make the blue background pulsate/flash in and out like a heart beat using jQuery. I don't want the blue background to disappear, but rather fade in and face out However, since I'm so new to jQuery, I have no idea how to do this. Can someone help me?

Here are my source files: Flashing.zip

I've kept the HTML simple and don't want to add any more HTML/DIVs. can you do this by using minimal HTML?

<!DOCTYPE html>
<html>
	<head>
		<title>Flash</title>
		<style>
			IMG{
				BackGround:	URL(./Back.png);
				Height:		333px;
				Width:		333px;
			}
		</style>
	</head>
	<body>
		<img src="Bike.png" />
	</body>
</html>

Thank you.

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

I just found this great solution (sweetsam, you live up to your name!) and I am trying to extend it to pulse any div that matches a certain class name (so it's more portable), but I keep running into walls whenever I try to pulsate more than one item at a time.

I've stripped out the enclosed span from css and code, and am pulsing just the div itself now (which is all I wanted), but I can't figure out how to extend this:

$('#pulse').pulsate();

so that it pulses all divs of CLASS .pulse that happen to be on the page, rather than just the single ID #pulse. When I call it again for a second item, nothing happens, so I'm dead in the water before I can even think about looping.

Can anyone shove me in the right direction? I'm pretty sure I could throw away everything and do it from scratch with regular old JS, but I'm trying to learn "the JQuery way".

And.... three minutes after I ask the question, I figured it out. Isn't that always the way? I was missing a dot.

If anyone cruises this answer later, these (obvious) changes work to make all items of class "pulse" pulse...

$('.pulse').pulsate(); .pulse	{ .pulse img	{

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.