2

私は現在javascriptを学んでおり、スライドしているコンテナをクリックすると、各スライドdivコンテナ内のコンテンツを反転するとともに、異なるdivコンテナをスライドさせたいと思います。

グライディング コンテンツに示されている例に従って、コンテンツ スライディング div を作成しました 。コンテンツのフリッピングで提供されているリンクを使用してコンテンツをフリッピングする例も取得しました。両方を統合しましたが、コンテンツの反転が機能していないようです。個別に実行しようとすると、正常に機能します。

これに関する任意の助けに感謝します,

ありがとう

**編集* * * jsfiddleの使用方法がわかりませんが、js fiddleでフォルダーを作成してファイルを配置する方法がわからないため、javascriptとcssにはソースファイルへの参照がありません。これに関しては感謝し
ます基本的な考え方は私のリンクに示されているとおりです、

4

1 に答える 1

1

カスタムを行う必要がある場合は、プラグインを使用するよりも、CSS3 を学習することをお勧めします。MDN には、CSS3トランジション(アニメーション) と変換(フリップの場合は、必要な 3D 回転)に関する優れた記事があります。

これは、スライド/フリップを同時に行うデモです (Webkit のみ。Firefox、IE などで動作させるには、他のベンダー プレフィックスを追加する必要があります)。

デモ

HTML

<div class="container">
    <img src="http://lorempixel.com/400/200/food/1/" />
    <img class="slider" src="http://lorempixel.com/400/200/food/2/" />
</div>

<input value="flip" id="flip" type="button" />
<input value="slide" id="slide" type="button" />
<input value="both" id="both" type="button" />

CSS

.container { 
    width: 400px;
    height: 200px;
    overflow: hidden;
}
.slide {
  margin-top: -200px;  
}
.flip {
    -webkit-transform: rotate3d(0,1,0,90deg);
}
img {
    -webkit-transition: all 2s;
}
div {
    -webkit-transition: all 1s;
}

JS 

var stop = false;
$(".container").each(function(i,e) {
    e.addEventListener('webkitTransitionEnd', function(e) {
    if (stop === false) {
        $(this).toggleClass("flip");    
        stop = true;
    }
    });
});

function flip(e) { 
    stop = false;
    $(".container").toggleClass("flip"); 
}
function slide() { 
    $(".slider").toggleClass("slide"); 
}
function both() {
    flip();
    slide();
}

$(document).on("click", ".container", function() {
    flip.call(this);
    slide(this);
});

$("#flip").click(flip);
$("#slide").click(slide);
$("#both").click(both);

</p>

于 2012-09-28T06:29:48.920 に答える