CODEWITHSUNDEEP
jqueryimagebackgroundfadeinfadeout
user975876
user975876

Reputation: 63

jquery fading background images

I'm pretty new to jQuery, but I'm looking for a simple script to loop 3 or 4 background images in a header by fading them in and out. They're transparent pngs, so a lot of the sliders I've tried for this won't work.

Any ideas? Thanks!

EDIT: I've got this working, but I can't figure out how to fade in/fade out

setInterval(function() {
    var source = $("#background-images img:first").attr("src");
    $('#background-images img:first').appendTo($('#background-images'));
    $('#fading-images-container').css('background', 'url(' + source + ') no-repeat');
}, 5000);

Upvotes: 2

Views: 2009

Answers (2)

Frank Myat Thu
Frank Myat Thu

Reputation: 4474

<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Basic Demo</title>

<style type="text/css">
.slideshow { height: 232px; width: 300px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        });
});
</script>
</head>
<body>

    <div class="slideshow">
    <img src="IMG_2624.JPG" width="500" height="500" />
    <img src="IMG_2625.JPG" width="500" height="500" />
    <img src="IMG_2626.JPG" width="500" height="500" />
    <img src="IMG_2627.JPG" width="500" height="500" />     
</div>
</body>
</html>

I make reference to this link http://jquery.malsup.com/cycle/basic.html

Upvotes: 0

madomausu
madomausu

Reputation: 331

Have you tried the jQuery cycle plugin? I haven't specifically checked that it works with transparent PNGs, but it's never failed me before. http://jquery.malsup.com/cycle/

Upvotes: 1

Related Questions