помощь в переходном эффекте с помощью CSS3 или JS или JQuery

Question

Я хочу изменить фоновое изображение этого изображения при перемещении к другому в папке с моими изображениями, как это пример это мой код

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>

Answer 1

jQuery.cycle - ваш ответ.

<script type="text/javascript">

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

Вы должны удалить идентификатор «image», и элементы image должны содержаться внутри вашего «image_holder», который содержит ссылки на изображения, которые вы хотите циклически (переход) через.Ваш HTML-код будет выглядеть примерно так:

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

Если ваш переход с изображением работал так, как вам понравилось в вашем CSS, используйте CSS для перехода и пропустите тип перехода в jQuery.Вот ссылка на различные переходы, которые могут быть вам полезны при использовании jQuery.cycle. jQuery.cycle переходы

Answer 2

Эффект в вашем примере не будет достижим в CSS, анимация перехода не может быть отменена, поэтому каждая анимация должна завершаться как для событий наведения мыши, так и для мыши в CSS.