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>
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
您的示例中的效果在CSS中无法实现,无法取消过渡动画,因此每个动画都必须完成CSS中的鼠标悬停和鼠标移出事件。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.