Cycle EaseIn

Hrm, should I be calling the div in a class I can’t find on that page what I’m after.

Sorry, the easing page I meant to mention is this one:
http://gsgd.co.uk/sandbox/jquery/easing/

(updated previous post)

I don’t know how to answer that.

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.


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

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.

The following script would have to be placed within the page to accomplish the transition from changing per DIV?

$(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);
        }});
    });
});

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.

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

Paul, it is not possible to have the DIV bounce in and change images based on a different trigger ?

What is the relationship between the div and the images?

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.

Okay, and what is the relationship between the div and the image?

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

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.

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

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?

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.

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 ?

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?