CODEWITHSUNDEEP
jquerycssloopsdelay
Tarana
Tarana

Reputation: 15

How to change text after delay and loop it back?

I am trying this "Text in Transparent Box" using CSS.

<!DOCTYPE html>
<html>
<head>
<style>
div.background
{
  width: 500px;
  height: 250px;
  background: url(image.jpg) repeat;
  border: 2px solid black;
}
div.transbox
{
  width: 400px;
  height: 30px;
  margin: 30px 50px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
  text-align:center;
  margin: 4px 0px;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body><div class="background" style="display:inline-block">
<div class="transbox" style="display:inline-block">
<p>This is my first position</p>
</div>
</div>
</body>
</html>

How do I automatically change position of transparent box and text after 5secs delay and again and then loop it allover again? Check this screenshot image:

Image 1 for position1 :http://i57.tinypic.com/x3detu.jpg

Image 2 for position 2:http://i60.tinypic.com/ipnw5v.png

Image 3 for position 3:http://i58.tinypic.com/2lnff3t.png

Loop this back to Position1

EDIT

Code added as you advised, but it doesn't work::

<!DOCTYPE html>
<html>
<head>

<style>
div.background
{
  width: 500px;
  height: 250px;
  background: url(banner.jpg) no-repeat;
  border: 2px solid black;
}
div.transbox
{
  width: 400px;
  height: 30px;
  margin: 30px 50px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
  text-align:center;
  margin: 4px 0px;
  font-weight: bold;
  color: #000000;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>
<body>
<script>
    (function($) {
        var transbox = $('div.transbox');

        (function runIt() {
            transbox
            .delay(1500).animate({"top": "70px"}, 1000)
            .delay(500).animate({"top": "160px"}, 1000)
            .delay(500).animate({"top": ""}, 200, function () {runIt();});
        }());
    }());
</script>


<div class="background" style="display:inline-block">
<div class="transbox" style="display:inline-block">
<p>This is my first position</p>
</div>
</div>

</body>
</html>

Upvotes: 0

Views: 1420

Answers (1)

pabo
pabo

Reputation: 635

jQuery makes this pretty easy:

var transbox = $('div.transbox');

(function runIt() {
    transbox
    .delay(1500).animate({"top": "70px"}, 1000)
    .delay(500).animate({"top": "160px"}, 1000)
    .delay(500).animate({"top": ""}, 200, function () {runIt();});
}());

Note that for this to work, you'll also need to add a position: relative to your css for div.transbox

http://jsfiddle.net/pabo/Gj6tN/

If you don't want the animation effect, you can set the easings to 0 (the easings are the 1000, 1000, and 200 that define how long the animation should take). Or you could change .animate() to .css() but that doesn't take a callback so you'd have to chain another call.

EDIT

You can pass whatever css rules you want to the .animate() method. I've shown an example of moving horizontally as well as vertically. And I've added the changing text.

http://jsfiddle.net/pabo/YuJ8K/

EDIT 2

You need jQuery. From your question's tags, I assumed you were already using it, but maybe you aren't. The easiest way to include jQuery is to use the version hosted at google.

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

Then, you need to wrap the javascript code in a script tag and in some sort of event that will fire after page ready. Any javascript (jQuery or otherwise) that you add into the

$("document").ready(function() { //code here });

enclosure will get executed when the page is ready.

<body>
    <script>
    $("document").ready(function() {
        var transbox = $('div.transbox');

        (function runIt() {
            transbox
            .delay(1500).animate({"top": "70px"}, 1000)
            .delay(500).animate({"top": "160px"}, 1000)
            .delay(500).animate({"top": ""}, 200, function () {runIt();});
        }());
    });
    </script>

    ....rest of html....
</body>

Upvotes: 2

Related Questions