SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 96

Thread: Cycle EaseIn

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

    Cycle EaseIn

    I changed an aspect of my page, using jQuery Cycle I want to get #silhouette to bounce in each, displaying a different image for each nested DIV within the #content DIV. For the script Cycle Ease script I did an assumption that "bounceIn" exists, I don't really know and I wasn't able to clarify my assumption on the sites documentation !

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    I did an assumption that "bounceIn" exists, I don't really know and I wasn't able to clarify my assumption
    Yes, it does exist, and it's in the very first example on that page.

    It's easy enough to double-check. Open up http://malsup.github.com/jquery.easing.1.1.1.js and you will find:

    Code javascript:
    jQuery.extend({
        easing: {
            ...
            bouncein: function(x, t, b, c, d) {
                return c - jQuery.easing['bounceout'](x, d-t, 0, c, d) + b;
            },
            ...
        }
    });

    You might only be using the wrong capitalization of the word.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If bounceOut does what is demonstrated on the page, what would you call doing the opposite whereas it bouncesIn, it can't be bounceIn because the example just opposite of bounceOut does bounceIn but I don't want that effect. I want the bounceOut effect to be flipped !!!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    I want the bounceOut effect to be flipped !!!
    So that instead of moving down and bouncing against the bottom, it instead moves up and bounces against the top?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

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

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    Correct.
    So to clarify, with this example code you want it to bounce up, instead of bouncing down.

    Code javscript:
    $('#s2').cycle({ 
        fx:      'scrollDown', 
        speedIn:  2000, 
        speedOut: 500, 
        easeIn:  'bounceout', 
        easeOut: 'backin', 
        delay:   -2000 
    });

    It should be as simple as changing scrollDown to scrollUp.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    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's not working !

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    It's not working !
    Here's some demo test code that demonstrates it working.

    Code html4strict:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" media="screen" href="http://jquery.malsup.com/cycle/cycle.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js"></script>
    <script type="text/javascript">
    $(function() {
        $('#s2').cycle({
            delay:   -2000,
            fx:      'scrollUp',
            speedOut: 500,
            easeOut: 'backin',
            speedIn:  2000,
            easeIn:  'bounceout'
        });
    });
    </script>
    </head>
    <body>
    <div id="s2" class="pics">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
    </div>
    </body>
    </html>
    Last edited by descarte; Mar 7, 2011 at 09:42.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have everything in place, the only thing I didn't add was this;
    $.fn.cycle.defaults.timeout = 6000;
    I didn't add it because I assume it will just repeat the bounce, which I don't want. I want the bounce to happen when the nested ID is loaded, then stop.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    I have everything in place
    Quote Originally Posted by SiberianHuskey View Post
    I want the bounce to happen when the nested ID is loaded, then stop.
    You have not yet stated whether you have got things to work or not, after having received the working demo code.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have things working.

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    I don't have things working.
    Well the test demo works, so we need to now see what you're doing.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not doubting the test demo, I'm doubting what I've mismatched here.

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    I'm not doubting the test demo, I'm doubting what I've mismatched here.
    Where you have:

    Code javascript:
    $('#silhouette').cycle({

    That div with an id of "silhouette" is empty.

    Code html4strict:
    <div id="silhouette"></div>

    There are no images that the plugin can cycle.

    Where on your page are the images that you want to cycle?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wanted to cycle the DIV and then just place the images after, is that not possible ? Regardless even if I were to put proxy images, that would cycle the images, not display one image upon the nested div loading, clicking another nested navigation, it cycles to display a different image, understood ?

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    I wanted to cycle the DIV and then just place the images after, is that not possible ?
    That's not how the cycle plugin works.

    Quote Originally Posted by SiberianHuskey View Post
    Regardless even if I were to put proxy images, that would cycle the images, not display one image upon the nested div loading, clicking another nested navigation, it cycles to display a different image, understood ?
    For some reason I fail to understand. I'll bow out of this thread until I can understand things again.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    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 concept is simple. There are nested DIV's within one DIV on my site, when one of the anchors (nested divs) are initiated it loads another part of the site, the DIV in which cycle is calling would bounce, changing the image for each nested DIV.

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    The concept is simple. There are nested DIV's within one DIV on my site, when one of the anchors (nested divs) are initiated it loads another part of the site
    So the bounce effect is not a timed behaviour that is occurring to multiple images.

    The jQuery cycle plugin can not help you. I don't know how to make things clearer than that.
    How about - with jQuery cycle, you are wandering down a pretty path that will take you absolutely nowhere that is useful to you.

    Instead of the cycle, you need to focus on how to trigger that bounce effect on those divs.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #19
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In otherwords the bounce effect can halfway work, but I need to trigger the bounce effect on the divs !??!

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    In otherwords the bounce effect can halfway work
    Not quite.

    When an element is animated from one place to another, the easing part affects its movement. With jQuery cycle, the easeOut effect occurs first, followed by the easeIn effect when it gets near its destination.

    Quote Originally Posted by SiberianHuskey View Post
    but I need to trigger the bounce effect on the divs !??!
    The easing page would be a good resource from which to get started on that.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #21
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Sorry, the easing page I meant to mention is this one:
    http://gsgd.co.uk/sandbox/jquery/easing/

    (updated previous post)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  22. #22
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hrm, should I be calling the div in a class I can't find on that page what I'm after.

  23. #23
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    Hrm, should I be calling the div in a class I can't find on that page what I'm after.
    I don't know how to answer that.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  24. #24
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    I need to trigger the bounce effect on the divs !??!
    This sample code shows two sections (the second one hidden), which on a button-click causes the hidden one to update and show itself replacing the first, with a bounceout effect.

    Code html4strict:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" media="screen" href="http://jquery.malsup.com/cycle/cycle.css" />
    <style type="text/css">
    #sections {
        border: 1px solid black;
        margin: 1em;
        width: 40em;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
    <script type="text/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);
            }});
        });
    });
    </script>
    </head>
    <body>
    <h1>Bounce effect when updating different sections</h1>
    <button class="update">Update section</button>
    <div id="sections">
        <div class="section">
            <h2>Section 1</h2>
        </div>
        <div class="section">
            <h2>Section 2</h2>
        </div>
    </div>
    </body>
    </html>

    Is this something like what you're after?
    Last edited by descarte; Mar 7, 2011 at 09:43.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  25. #25
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I understood correctly, then yes that is what I'm after. To recap, OnClick would cause the previous image to be replaced with a BounceOut Effect / Scroll up effect with another image.


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
  •