helping in transition effect by CSS3 or JS or jquery

Question

I want to change the background-image of this picture while moving to another one on my images folder like this example that's my code

CSS

.image {

    position: relative;
        overflow: hidden;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
        opacity:1;
filter:alpha(opacity=100);

}
.image:hover {

        opacity:0;
filter:alpha(opacity=0);
    -moz-transform:  scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
    -webkit-transform:   scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
    transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg); transform-origin: 0% 0%
    background-color:#36F;

    }

HTML

<div id="image_holder_1" class="image_holder">
    <img id="image_1" class="image" src="images/esu.gif" />
</div>

user799910 · Accepted Answer · 2011-06-17 15:54:10Z

jQuery.cycle is your answer.

<script type="text/javascript">

    $(document).ready(function() {
        $('.image_holder').cycle({
                fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        });
    });
</script>

You should remove the "image" id and image elements should be contained inside your "image_holder" that contain links to the images you want to cycle (transition) through. Your html will then look something like this:

<div id="image_holder_1" class="image_holder">
         <img src="images/esu.gif"/>
         <!-- Your other image source(s) goes here -->
</div>

If your image transition worked the way that you liked with your css, use the css for the transition and omit the transition type in the jQuery. Here is a link to the different transitions that may be useful to you by using jQuery.cycle. jQuery.cycle transitions

JaredMcAteer · Accepted Answer · 2011-03-11 16:56:30Z

1

The effect in your example would not be achievable in CSS, transition animations cannot be cancelled, so each animation would have to complete for both the mouse over and mouse out events in the CSS.

answered Mar 11, 2011 at 16:56

JaredMcAteer

22.7k5 gold badges52 silver badges68 bronze badges

1 Comment

john Over a year ago

Fixed , the code I put made most the effect except changing the image , So how can I do that by JS/jquery the last effect only ???

Collectives™ on Stack Overflow

helping in transition effect by CSS3 or JS or jquery

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related