Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Make changing text that loops with 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

    Code:
    <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

    Code:
    .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.

    Code:
        $(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?

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    there's probably a more "jQuery-ish" way of doing this, but this seems to work...
    Code:
    $(document).ready(function () {
    var eng=true;
    setInterval(function(){
    if(eng){
            $("#welcome").animate({ bottom: '30px' }, 1000);
            $("#bienvenido").animate({ bottom: '60px' }, 1000);
    		eng=false;
    		} else {
    		$("#welcome").animate({ bottom: '0px' }, 1000);
            $("#bienvenido").animate({ bottom: '30px' }, 1000);
    		eng=true;
    		}
    		},3000)
        });
    Last edited by xelawho; 07-27-2014 at 02:46 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •