0

ライブ js-Fiddle デモ リンク: http://jsfiddle.net/ivandude/r2UgV/1/

ご覧のとおり、ページは 4 つのスライドに分割され、スライドをクリックすると開きます。領域の上にマウスを移動し、いずれかをクリックしてスライド全体を開くという単純な機能は、これまでのところすべて正常に機能しています。

問題は、残念ながら、これらのスライドの 1 つが完全に表示されているときに、前方に移動しようとしています ([次へ] ボタンをクリック)。[スライド 1 ([開く] をクリック) を参照し、[> 矢印] をクリックしてください] . 次のスライドに移動する方法を見つけたいだけです。私の論理的な考えは、jQuery クリック イベントを一意の ID の矢印ボタンに割り当て、ページ 1 を閉じるように指示し、その後ページ 2 が開くようにすることでした <--- ただし、これは機能しませんでした。

簡単に編集して使用できるように、コメント付きの上記の jQuery を用意しました。以下のページとその影響を受ける領域を確認するのが最善だと思いますが、読んでいて、私を助けることができれば、どうもありがとうございます:) JS Fiddleと以下の説明を使用して、できるだけ簡単にしようとしました.

実行順:

  1. ページの読み込み時 > 各ページ (4 つのスライドのうちの 1 つ) は CSS width:25%によって設定されます。ブラウザ ウィンドウを動的に埋めるために高さを取得しますが、ここでは重要ではありません。

  2. 本体負荷時 > パーセンテージは魔法のように機能し、jQuery はこれらの % を jQuery を介して変数データに変換します。

    $("#page-1, #page-2, #page-3, #page-4").each(function() {
$(this).data("standardWidth", $(this).width());
});

    これらは、後でスライドを拡大する (プレビューを表示する) ホバー効果に使用されます。（例えば、まだクリックせずにマウスを動かしてください）

  3. マウスがスライドをホバーすると、次のことが起こります。

    $("#page-1, #page-2, #page-3, #page-4").mouseenter(function() {

$(this).parent().children().not(this).animate({
    opacity: 0.5,
    width: (($(this).data("standardWidth") - 34)+'px')
}, 250 );

$(this).animate({
    opacity: 1,
    width: (($(this).data("standardWidth") + 100)+'px')
}, 250 );

});

    mouseleave イベントはありません。

  4. スライドをクリックすると、次のことが起こります。

    $("#page-1, #page-2, #page-3, #page-4").click(function() {

$(this).parent().children().not(this).animate({
    opacity: 0,
    width: ((0)+'px')
}, 300 );

$(this).animate({
    opacity: 1,
    width: $(document).width()
}, 300 );

});

  5. そしてもちろん、ここにクリック時に作成しようとしている独自のボタンがあります。ページ1は折りたたまれ（幅0？）、ページ2は展開され（幅100％？）、ある種の実行可能なjqueryコードで割り当てることができます各ボタンごとのカスタム機能:)

    $("#s1-arrow-r").click(function() {

$("#page-1, #page-3, #page-4").parent().children().stop().animate({
    opacity: 0,
    width: ((0)+'px')
}, 300 );

$("#page-2").stop().animate({
    opacity: 1,
    width: $(document).width()
}, 300 );

})

このマイクロ サイトには 4 つ以上のスライドがなく、手動で学習している最中でもあるため、すべての手動の​​ [次へ] ボタンに一意の ID を作成することに問題はありません。

4

1 に答える 1

0 
RETURN FALSE;

この問題を解決するために使用されています。スライドは元の状態に戻り続け、これは .click(function() が閉じられる前に役立ちます。必要に応じて詳細についてお問い合わせください...

于 2013-03-11T23:49:27.543 に答える