I'm changing the background-image of a div using jquery+css like this:
var slide_images = ["http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2014/2/7/1/FNM_030114-Spaghetti-Carbonara-Recipe-h_s4x3.jpg", "http://www.labrasseriefirenze.it/labrasserie/wp-content/uploads/2013/12/spaghetti-carbonara.jpg"]; var slide_count = 0; $(document).ready(function() { setInterval(function() { slide_count=++slide_count%slide_images.length; $('.slide_photo').css('background-image', 'url(\\''+slide_images[slide_count]+'\\')'); }, 4000); });
.slide_photo { position: relative; top: 30px; width: 100%; height: 200px; background-image: url('http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2014/2/7/1/FNM_030114-Spaghetti-Carbonara-Recipe-h_s4x3.jpg'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; transition: all .2s ease; } .slide_photo:hover { background-size: 110% auto; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="slide_photo"></div>
The question is : Is it possible to add a fade-in effect or transition to make the change smoother than it is?
How about some css3 animation like this
.slide_photo{
-webkit-animation: fade 4s infinite;
-moz-animation: fade 4s infinite;
-o-animation: fade 4s infinite;
animation: fade 4s infinite;
}
.slide_photo {
position: relative;
top: 30px;
width: 100%;
height: 200px;
background-image: url('http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2014/2/7/1/FNM_030114-Spaghetti-Carbonara-Recipe-h_s4x3.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
transition: all .2s ease;
-webkit-animation: fade 4s infinite;
-moz-animation: fade 4s infinite;
-o-animation: fade 4s infinite;
animation: fade 4s infinite;
}
.slide_photo:hover {
background-size: 110% auto;
}
@-webkit-keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-o-keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
var slide_images = ["http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2014/2/7/1/FNM_030114-Spaghetti-Carbonara-Recipe-h_s4x3.jpg", "http://www.labrasseriefirenze.it/labrasserie/wp-content/uploads/2013/12/spaghetti-carbonara.jpg"]; var slide_count = 0; $(document).ready(function() { setInterval(function() { slide_count = ++slide_count % slide_images.length; $('.slide_photo').css('background-image', 'url(\\'' + slide_images[slide_count] + '\\')'); }, 4000); });
.slide_photo { position: relative; top: 30px; width: 100%; height: 200px; background-image: url('http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2014/2/7/1/FNM_030114-Spaghetti-Carbonara-Recipe-h_s4x3.jpg'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; transition: all .2s ease; -webkit-animation: fade 4s infinite; -moz-animation: fade 4s infinite; -o-animation: fade 4s infinite; animation: fade 4s infinite; } .slide_photo:hover { background-size: 110% auto; } @-webkit-keyframes fade { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fade { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fade { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="slide_photo"></div>
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.