javascript - JQueryを使用してフェードまたは画像トランジション効果を追加するには?

Question

<img>ページには要素が1 つしかありません。srcこの画像の属性を 7 秒ごとに変更します。

新しい画像は 7 秒ごとに表示されますが、新しい画像をロードするときにフェードやトランジション効果を追加できればもっといいでしょう。

これには簡単なスクリプトがありますか？

プラグインは必要ありません。それを行うには、いくつかの手がかりまたは数行のサンプルが必要です。

Answer 1

KaiQingが言及したことにもかかわらず、jQueryのコールバック機能を使用して、画像を変更しているときに画像をフェードイン/フェードアウトできます。これは次のように行うことができます: http://www.jsfiddle.net/bradchristie/HsKpq/1/

$('img').fadeOut('slow',function(){
    $(this).attr('src','/path/to/new_image.png').fadeIn('slow');
});

Answer 2

次の 2 つの画像を使用します。

<img id="backImg" />
<img id="frontImg" />

次のよう#backImgに後ろに設定します。#frontImg

#backImg
{
    position: absolute;
}

次に、7秒ごとに起動するコードで、前面の画像をフェードアウトします...背面の画像が既にその背後にロードされているため、これによりクロスフェード効果が自動的に実行されます。フェードが完了したら、フロント イメージのソースをバック イメージの src に設定して表示し、次のイメージをバック イメージにプリロードします。

function transitionImages(preloadImgUrl)
{
    $("#frontImg").fadeOut("slow", function()
    {
        $("#frontImg").attr("src", $("#backImg").attr("src")).show();
        $("#backImg").attr("src", preloadImgUrl);
    }
}

これはすべて、画像のサイズが同じであることを前提としています。そうでない場合は、css でもう少し精巧になり、フェードアウトする div で画像をラップする必要があります。

Answer 3

1枚の画像だけではできません。

これをチェックしてください：

    <div id="main_over"></div> 
    <div id="main_img"></div> 
    <div id="himg" style="display:none; clear:both; margin-top:40px;"> 

            <img id="si_15" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_1__large.jpg" alt="dummy_image_large_1" /> 

            <img id="si_16" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_2__large.jpg" alt="dummy_image_large_2" /> 

            <img id="si_17" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_3__large.jpg" alt="dummy_image_large_3" /> 

            <img id="si_18" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_4__large.jpg" alt="dummy_image_large_4" /> 

    </div> 
<style> 
#main_over{position:absolute; z-index:10; width:800px; height:600px; background:#fff; display:block;}
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
    var i = 0;
    $('#himg img').each(function(){
        if(i == 0)
        {
            $('#main_over').html('<img src="' + $(this).attr('src') + '" alt="" />');

        }
        if(i == 1)
        {
            $('#main_img').html('<img src="' + $(this).attr('src') + '" alt="" />');
        }
        i ++;

        slide.arr.push($(this).attr('src')); 
    });

    setTimeout(function(){
        if(slide.arr.length < 2)
            slide.fade(0);
        else
            slide.fade(2);
    }, 3000);
});

var slide = {
    arr: Array(),
    fade: function(i)
    {
        $('#main_over').fadeOut("medium");
        setTimeout(function(){slide.next(i);}, 1000);
    },
    next: function(i)
    {
        $('#main_over').html($('#main_img').html());
        $('#main_over').css('display', 'block');

        $('#main_img').html('<img src="' + slide.arr[i] + '" alt="" />');

        i++;
        if(i >= slide.arr.length)
            i = 0;

        setTimeout(function(){slide.fade(i);}, 3000);
    }
}

</script>