1

作成していたjqueryイメージカルーセルが機能しています。ほぼ完成しています（増加ボタンだけが機能します）：http：//jsfiddle.net/2C8fy/7/

私が直面している唯一の問題は、画像が追加されてもフェードインしないことです。表示されるだけです。不透明度が0の右側に別のスロットを追加し、それをアニメーション化してフェードインしようとしましたが、それも機能しなかったようです。その右のスロット画像をアニメーション化して、フェードインしているように見せることはできますか？これが私が今持っているものです：

$('#basic_div').animate({          //slides the div with the images in it to the left.
            left: '-=40px'
        }, 300, function() {

        });

        left.animate({             //fade out effect for the left most image
            opacity: 0
        }, 300, function() {
            left.remove();         //gets rid of left most image after it becomes invisible.
            $('#basic_div').css({
                left: '0px'        //resets the div that contains the images
            });
        });


            middle.attr('id', 'left_slot');       //changes ids
            right.attr('id', 'middle_slot');


            $("#basic_div").append(newImgSL);
            newImgSL.attr('id', 'right_slot');
            newImgSL.animate({
                opacity: 100   //I thought this would make it fade in, but it still just appears.
            }, 300);
4

1 に答える 1

3

fadeIn()画像の場合は、またはとで始めdisplay: noneます。.hide()opacity: 1

または、初期不透明度を0に設定して、を使用することもできますfadeTo(3000, 1)。

fadeIn()画像は、最初display: noneは不透明度が最終的な不透明度に設定されていると想定しています。次に、最終的な不透明度を記憶し、不透明度を0に設定し、画像を表示してから、不透明度のアニメーション化を開始します。

fadeTo()現在の不透明度から開始し、新しく指定した不透明度までフェードします。

したがって、あなたの場合、これを行うことができます：

// set id and initial opacity
newImgSL.attr('id', 'right_slot').css("opacity", 0);
// put it into the page
$("#basic_div").append(newImgSL);
// fade to visible
newImgSL.fadeTo(300, 1);

また、不透明度は0から1までの10進数であることを忘れないでください。

newImgSLあなたのコードはどこから来たのかを示していません。また、フェードする前に、画像の読み込みが完了していることを確認する必要があることを忘れないでください。

于 2012-04-23T05:16:31.443 に答える