CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3880230
user3880230

Reputation: 1

Make changing text on loop in Jquery

what i'm trying to do seems pretty simple. keyword seems. haha.

I'm trying to make text that changes back and forth between two languages. Kind of like a GIF type animation (tried that didn't like how it looked) I know flash would be the better option but I don't have those capabilities so i've turned to javascript- but my experience there isn't too great either. here's my HTML

<div id="welcomediv">
<h1 class="welcome" id="welcome">Welcome-Select your language</h1>
<h1 class="welcome" id="bienvenido">Bienvenido-Elegí tu idioma</h1>
</div>

Then I thought I could take that along with the following CSS

.welcome
{
font-size:18px;
font-weight:bold;
font-family:Century Gothic;
color:White;
margin-top:5px;
margin-bottom:30px;
position:relative;
}

#welcomediv
{
display:block;
position:relative;
top:45%;
height:30px;
overflow:hidden;
}

I did that thinking that I could use jquery to move the elements up and down and then they'd go out of view and get what i'm looking for. I want it to go up and out as the other one is sliding back into place. I achieved that. But just couldn't make it loop. 

  $(document).ready(function () {
    $("#welcome").delay(3000).animate({ bottom: '30px' }, 1000);
    $("#bienvenido").delay(3000).animate({ bottom: '45px' }, 1000);
    });

This is how I did it.

Now I know this probably isn't the best way to go about this so any and all help is greatly appreciated!! How would I simply make it loop? Or should I change it up totally?

Upvotes: 0

Views: 1676

Answers (2)

apaul
apaul

Reputation: 16170

If all you're looking to do is animate the text back and forth you may want to consider using a CSS keyframe animation, like so:

Working Example

.welcome {
    font-size:18px;
    font-weight:bold;
    font-family:Century Gothic;
    color:red;
    margin-top:5px;
    margin-bottom:30px;
    position:relative;
    animation: yourAnim 3s infinite alternate; /* name, duration, number of iterations, direction */
}

@keyframes yourAnim {
    0%{bottom: 0px;}
    25%{bottom: 0px;}
    50%{bottom: 55px}
    100%{bottom: 55px;}
}

Note browser prefixes omitted for brevity.

Upvotes: 0

Sid
Sid

Reputation: 1144

You can use setInterval for this:

var showingWelcome = true;
setInterval(function() {
  if (showingWelcome) {
    $("#welcome").animate({ bottom: '30px' }, 1000);
    $("#bienvenido").animate({ bottom: '45px' }, 1000);
    showingWelcome = false;
  }
  else {
    $("#welcome").animate({ bottom: '0px' }, 1000);
    $("#bienvenido").animate({ bottom: '0px' }, 1000);
    showingWelcome = true;
  }
}, 3000);

Here's a JSBin http://jsbin.com/xoziquze/1/edit?html,css,js,output that shows it working.

By the way, in my opinion JavaScript is perfectly fine for this and Flash would be overkill.

Upvotes: 1

Related Questions