SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: A jQuery Query!

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A jQuery Query!

    Hi there, nice to be the newest member here

    I've got a jQuery question I'd like some help with. I'm trying to get a testimonial to fade out so another one can be selected and take it's place.

    Code:
    function scroller() {
        //other stuff to do with scroller
            $('#scrollText').stop(false, false).animate({top: '-100px'}, 
                    (3000), function() {
                        /* Animation complete. */ });
            $('#scrollText').fadeOut(500, function() { /* Animation complete. */ });
            //code to replace testimonial text, and reset top to 0px
            $('#scrollText').fadeIn(500, function() { /* Animation complete. */ });
    }
    I thought these would all run nicely after each other... but that's not the case.

    I've tried various things with the 'Animation complete' sections, and even tried splitting everything up using "setTimeout(replaceTestimonial(), 3000);" etc, but nothing seems to run like I imagined.

    Can you please point out where I'm going wrong, or even give a link resolving a similar problem?

    Thanks.

  2. #2
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can anyone help me with this?

    ...or does this question belong on a different forum since it's jQuery?

    I'm really just looking for a smooth, timed transition between the objects

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi there,
    If you could you post a link to a page where I can see the problem you describe, I wouldn't mind taking a look.

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zara4 View Post
    I'm really just looking for a smooth, timed transition between the objects
    Hey Zara4,

    You're on the right track here, what you're going to want to do is make sure things execute in the right sequence.

    At the moment the animate and fade functions are called subsequently, without waiting for the others to finish. So what we need to do is put them in the callback functions so they cascade, and then call scroller() again at the end (creating a loop of the effect).

    Code JavaScript:
    function scroller() {
        //other stuff to do with scroller
        $('#scrollText').animate({top: '-100px'}, 3000, function() {
            //after moving the item up, fade it out
            $('#scrollText').fadeOut(500, function() { 
                //code to replace testimonial text, and reset top to 0px
                //now that we've replaced the content, fade it in again
                $('#scrollText').fadeIn(500, function() { 
                    //finally call scroller again to make sure we have a loop
                    scroller(); 
                });
     
     
            });
     
     
        });
     
    }
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

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