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 10 of 10
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    30
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Jquery Loop Text/Image Slider/Animate In and Out

    I want to animate a text which slides in and increases the opacity to 100, then slides out decreases the opacity.

    Then the next text in line, comes and slides in and so forth.

    Now this jquery code animates exactly the way i want it to.

    Code:
    $('.heading1').animate({'margin-right':20,opacity:0},750);
    The heading will slide out, after the specified time of 750 and will disappear

    So the next heading in line should animate in. and this should be done for all the heading in a list in a constant loop.


    Code:
            <div class="sliderHeadings">
            	<ul id="my_slider">
        			<li><span class="heading1">00000</span></li>
                	<li><span class="heading1">111111</span></li>
                	<li><span class="heading1">222222</span></li>
                	<li><span class="heading1">333333</span></li>
            	</ul>
        	</div>
    Please help me get the effect i want.

  • #2
    New Coder
    Join Date
    Feb 2013
    Posts
    30
    Thanks
    2
    Thanked 0 Times in 0 Posts
    This is a bump and an update to my initial post.

    So heres what im after.

    http://jsfiddle.net/3JKkj/3/

    Problems:

    1. It doesn't "fade" in, as in it should start of with the opacity as 0 and fade + slide in.
    2. How can i loop this affect with the rest of my heading, ive used .hide() to hide the rest. But this is a problem when i need to show it again.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,757
    Thanks
    23
    Thanked 546 Times in 545 Posts
    Try this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <style type="text/css">
    #heading1, #heading2, #heading3, #heading4{
    	position: absolute;
    	left: 0px;
    	}
    
    </style>
    </head>
    
    <body>
    <div class="sliderHeadings">
    <ul id="my_slider">
    	<li><span id="heading1">00000</span></li>
    	<li><span id="heading2">111111</span></li>
    	<li><span id="heading3">222222</span></li>
    	<li><span id="heading4">333333</span></li>
    </ul>
    </div>
    
    <script type="text/javascript">
     $('#heading1').css({opacity: 0}).animate({opacity: 1.0,left: "50px"}, 1000);
     $('#heading2').css({opacity: 0}).delay(1000).animate({opacity: 1.0,left: "50px"}, 1000);
     $('#heading3').css({opacity: 0}).delay(2000).animate({opacity: 1.0,left: "50px"}, 1000);
     $('#heading4').css({opacity: 0}).delay(3000).animate({opacity: 1.0,left: "50px"}, 1000);
    </script>
    </body>
    </html>

  • #4
    New Coder
    Join Date
    Feb 2013
    Posts
    30
    Thanks
    2
    Thanked 0 Times in 0 Posts
    ^ Yea not really what i was looking for.

    1. they dont fade out/slide out.
    2. It should only display 1 heading at a time, it will then disappear and the other should appear in its place. and this should be looped

    Have a look at the jsfiddle i provided

  • #5
    New Coder
    Join Date
    Feb 2013
    Posts
    30
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Like this. http://jsfiddle.net/3JKkj/5/

    I just need to know how to .

    1. Loop it.
    2. Delay It so they stay on screen for longer.

    Is no other way to hide and display them? as using the delay the way you have makes it tricky to do other effects


    http://jsfiddle.net/3JKkj/6/ < played around got the delay i wanted seems abit trivial
    Last edited by KKHAN; 05-20-2013 at 03:51 PM.

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,757
    Thanks
    23
    Thanked 546 Times in 545 Posts
    And given the code I gave you you can't figure that out????
    At lest put a little effort into it and post the code you can't get working.

  • #7
    New Coder
    Join Date
    Feb 2013
    Posts
    30
    Thanks
    2
    Thanked 0 Times in 0 Posts
    ?

    I have done several times.

    Could you not see the link in the second post? or even the fourth ?

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,757
    Thanks
    23
    Thanked 546 Times in 545 Posts
    Post it here between the [code] tags

  • #9
    New Coder
    Join Date
    Feb 2013
    Posts
    30
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Post it here between the [code] tags
    Is there something wrong with jsfiddle? I thought it was encouraged.

  • #10
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,757
    Thanks
    23
    Thanked 546 Times in 545 Posts
    I have never heard that jsfiddle is encouraged. Nothing wrong with it, but I can't see code in jsfiddle. I'm some how blocked from it. If you posted a jsfiddle in your first post I would have never answered.


  •  

    Posting Permissions

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