jquery - JQuery.Cycle プラグイン 最初の画像のスライド

Question

JQuery Cycle プラグインを取得して、最初のスライドにスライド効果を適用しようとしています。フェードインする方法を示す例がありますが、blindX 効果を使用しているので、ロード時に画像を右から左にスライドさせると見栄えが良くなります。

何か案は？

ありがとう、

セバスチャンX

Answer 1

Łukasz に感謝します。あなたの答えは私に考えを与えました。これが私がやった方法です。

CSS - 最初のスライドを「アニメーション エリア」の外に移動しました

.slideshow {
   position: relative;
   left: 550px;
   overflow: hidden;}

JavaScript jQuery - $(document).ready

$('.slideshow').animate({marginLeft:'-550px'},1000, function(){
    $('.slideshow').cycle({
        fx: 'blindX',
        timeout: 1000
    });
});

Answer 2

自分で簡単にできます。最初のスライドを除くすべてのスライドを最初は非表示にします。次に、スライドショー ビューポート (要素を含む) の右側になるように最初のスライドを配置します。次に、ロード時に「左」プロパティを使用してアニメーションを呼び出します。

HTML

<div id="slides">
  <img>
  <img>
  ...
</div>

CSS

#slides {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

#slides > img {
   position: absolute;
   top: 0;
   left: 0;
   visibility: hidden;
}
#slides > img:first-child {
  left: 100px;
  visibility: visible;
}

読み込み中の JavaScript

$('#slides > img:first').animate(
    { left: 0 },
    500,
    function() { $('#slides > img').css('visibility', 'visible');  
});