Jquery Kütüphanesinin fadeOut Özelliğini Kullanarak Div Arkaplanı Değiştirme

Turan
02 Temmuz 2015 Perşembe
0

Jquery kütüphanesinin fadeOut özelliğini kullanarak div Arkaplanı değiştirebiliriz.Aşağıda belirttiğim kodu kullanarak alttaki çıktıyı elde edebilirsiniz.

<div id="dvImage" style="height: 308px; width: 410px">

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">

    var images = ["Chrysanthemum.jpg", "Desert.jpg", "Hydrangeas.jpg", "Jellyfish.jpg", "Koala.jpg", "Lighthouse.jpg", "Penguins.jpg", "Tulips.jpg"];

    $(function () {

        var i = 0;

        $("#dvImage").css("background-image", "url(images/" + images[i] + ")");

        setInterval(function () {

            i++;

            if (i == images.length) {

                i = 0;

            }

            $("#dvImage").fadeOut("slow", function () {

                $(this).css("background-image", "url(images/" + images[i] + ")");

                $(this).fadeIn("slow");

            });

        }, 1000);

    });

</script>

 

 

Ekran Görüntüsü

Change Background Image of HTML DIV with Fade Animation using jQuery

 



Yorum yaz