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 !

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:


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.

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 !!!

So that instead of moving down and bouncing against the bottom, it instead moves up and bounces against the top?

Correct.

So to clarify, with this example code you want it to bounce up, instead of bouncing down.


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

It should be as simple as changing scrollDown to scrollUp.

It’s not working !

Here’s some demo test code that demonstrates it working.


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

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.

You have not yet stated whether you have got things to work or not, after having received the working demo code.

I don’t have things working.

Well the test demo works, so we need to now see what you’re doing.

I’m not doubting the test demo, I’m doubting what I’ve mismatched here.

Where you have:


$('#silhouette').cycle({

That div with an id of “silhouette” is empty.


<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?

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 ?

That’s not how the cycle plugin works.

For some reason I fail to understand. I’ll bow out of this thread until I can understand things again.

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.

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.

In otherwords the bounce effect can halfway work, but I need to trigger the bounce effect on the divs !??!

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.

The easing page would be a good resource from which to get started on that.