SitePoint Sponsor

User Tag List

Page 2 of 4 FirstFirst 1234 LastLast
Results 26 to 50 of 96

Thread: Cycle EaseIn

  1. #26
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The following script would have to be placed within the page to accomplish the transition from changing per DIV?

    Code JavaScript:
    $(function() {
        $('.section:not(:first)').hide();
        $('.update').click(function () {
            var nextSection = $('.section:last');
            var date = new Date();
            nextSection.append('<p>Updated: ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds() + '</p>').show();
     
            var currentSection = $('.section:first');
            currentSection.animate({height: 'hide'}, {duration: 2000, easing: 'easeOutBounce', complete: function () {
                currentSection.insertAfter(nextSection);
            }});
        });
    });

  2. #27
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    The following script would have to be placed within the page to accomplish the transition from changing per DIV?
    The script works hand-in-glove with the HTML that was with it. Typically the script will be in an external script file, instead of being within the page.

    The script is not designed to work with your own personal page. I don't even know if your personal page is organised in such a way for a similar script to work.

    However, the script (and the associated HTML) is a "proof of concept" that demonstrates what may be required to achieve that technique.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #28
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It was mentioned within this thread that I could have the BounceIn effect applied and the image on the DIV, change all when a anchor is triggered. I'm getting a mixed message!!!

  4. #29
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, it is not possible to have the DIV bounce in and change images based on a different trigger ?

  5. #30
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    What is the relationship between the div and the images?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #31
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The objective what I want is this, a specific DIV on my page has easeIn/BounceOut effect based on a trigger, that trigger would cause the effect to initiate and change the image.

  7. #32
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Okay, and what is the relationship between the div and the image?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #33
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The relationship is that the DIV is what the EaseIn/BounceIn effect to which will have the effect on, and as for the image the image will be on that specific DIV

  9. #34
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    But what is the relationship between the div and the image. Is the same image always going to be with the same div? Are there going to be other divs with different images that don't change in relation to their div? Or, will some external process load a different image in to the div? Will there be different divs that always have the same information loaded in to them, or will the divs have different information loaded in to them each time. And how many divs will there be? What will be their different purposes?

    You haven't made it clear just what's going on there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #35
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It will be the same DIV that will load a different image based on a trigger, that trigger being none other then a different anchor

  11. #36
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    The same div? So how will you be able to achieve the effect of one image replacing the other, with some kind of a bouncing effect, if you only have one div?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #37
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is what I want know if I can accomplish this ?

  13. #38
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    That is what I want know if I can accomplish this ?
    You cannot accomplish it with only one div, because during the animation process I presume that you want the old image to still be showing while the new one is animated in to place, right?

    That means that at least two divs will be used during the animation.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #39
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You cannot accomplish it with only one div, because during the animation process I presume that you want the old image to still be showing while the new one is animated in to place, right?
    I want the old image replaced, does that make it possible or must I have multiple DIV easingIn with different images on each DIV ?

  15. #40
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    I want the old image replaced, does that make it possible or must I have multiple DIV easingIn with different images on each DIV ?
    In between the animations you can have only one div for the image, but when the animating is taking place you will need your script to create a second div for the image being animated. Once finished your script can remove the other div that's no longer being used, and you are left with only one div on the page again.

    Does that make sense?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #41
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Makes sense.

  17. #42
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    Makes sense.
    Okay, so the new image animates in to place using a bounce effect.

    While that animation is taking place, what's going on with the image that's being replaced. Is it just sitting there doing nothing, or does it fade out, or have something else happen to it?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #43
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The image that is being replaced will BounceOut and the new image will BounceIn. Look at it like this, if you had a cardboard which a Popsicle stick at the bottom, you pull the stick with the image down, when you push the popsicle stick up again a new image is in it's place, omitting the bounce effect logically with my popsicle stick example

  19. #44
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    The image that is being replaced will BounceOut and the new image will BounceIn. Look at it like this, if you had a cardboard which a Popsicle stick at the bottom, you pull the stick with the image down, when you push the popsicle stick up again a new image is in it's place, omitting the bounce effect logically with my popsicle stick example
    So the two images are never on the screen at the same time?
    One image animates out, and when it's completely out of sight the new image is animated back in to place?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #45
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So the two images are never on the screen at the same time?
    One image animates out, and when it's completely out of sight the new image is animated back in to place?
    Correct, this all happens at once, BounceOut one image, BounceIn next image.

  21. #46
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    Correct, this all happens at once, BounceOut one image, BounceIn next image.
    Okay, that could be done inside just the one div, assuming that the div has its display mode set to overflow, so that one image can be animated to be outside of the div, then that image is updated to the new image, and is animated back in again to where things started.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  22. #47
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wouldn't overflow being shown cause a vertical scroll inside the DIV ? What has to be applied to the script to put this into motion?

  23. #48
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    [QUOTE=SiberianHuskey;4809848]Wouldn't overflow being shown cause a vertical scroll inside the DIV ?

    The scrollbars can be turned off on that div too.

    Quote Originally Posted by SiberianHuskey View Post
    What has to be applied to the script to put this into motion?
    Let's start with the image replacement. The animation can be worked in as a part of that once the basics of the image replacement are done.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  24. #49
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright...

  25. #50
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    Alright...
    What do you have in place for the image replacement?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •