0

主な編集：

これは質問をよりよく説明するのに役立ちます、これを見てください、あなたが見ることができるように、2つのスライドはフェード効果を使用して変化します、どうすればツリー探索で見られるような左の効果へのスライドのためにこの効果を変更できますかGithubで？

2つのdivを想像してください。1つはマスターと呼ばれ、もう1つはスレーブと呼ばれます。

<div id="container">
  <div id="master" style="background-color:#ABC;">1</div>
  <div id="slave" style="background-color:#CBA;">2</div>
</div>

スレーブdivのコンテンツは、マスターdiv（すでにプログラムされている）でボタンが押されたときにのみajaxを介して更新され、成功すると（ajax呼び出しが終了してdivスレーブが更新されます）マスターdivを左にスライドさせたいスレーブdivスライドも。

最初の状態では、ユーザーはマスターdivのみを表示でき、スレーブは非表示になります。ボタンを押すと、マスタースライドが左に移動し、スレーブがスライドして元のマスター位置を占有します（単純なスライダーのみ）。私が言ったように、私はすでにjqueryとサーバー側のコード（php + ajax）ですべての基本的な相互作用をプログラムしていますが、これを達成するためにcssを設定する方法がわかりません。$('#div').slideLeft(400);

私は既存のjqueryプラグインまたはhtml5またはcss3（可能であれば）を使用したくありません。単純にしておきたいだけですが、繰り返しになりますが、フロントエンド開発者としてはあまり良くなく、これを正しく行うためにcssを理解することは私を夢中にさせます。助けてくれてありがとう！

私がslideLeft と言ったときに意味した編集：

$(this).hide("slide", { direction: "left" }, 1000);
$(this).show("slide", { direction: "left" }, 1000);
4

3 に答える 3

1

css2 "clip"プロパティを使用し、[クリップを機能させるために]コンテナdivを1つ追加し、フィドルコードをandanimateの代わりに依存するように少し変更することで、この効果が可能になります。ただし、解決策は、思ったほど単純ではなく、クリーンでもありません。それにもかかわらず、それは機能します。fadeInfadeOut

HTML：

<div style="position:relative;width:200px;height:100px;left:100px;">
    <div style="position:absolute;clip:rect(0px,200px,100px,0px);overflow:none;width:200px;height:100px">
    <div class="table-cont" style="display: none; position:absolute; background-color:#ABC;width:100%;height:100px;"></div>
    <div class="table-coupons" style="display: none; position:absolute;top: 0px; background-color:#CBA;width:100%;height:100px;"></div>
</div>
</div>

JS：

 $(document).ready(function() {

$('div.table-coupons').css({opacity:0,marginLeft:200});

     calltable();
        function calltable()    {
$('div.table-coupons').css('display','block');
$('div.table-cont').css('display','block');

            $('div.table-coupons').animate({opacity:0,marginLeft:200},{ duration: 300, queue: false,complete:function(){$(this).css('display', 'none')}});
            $('div.table-cont').html('HELLO World! <a href="#" class="coupon_link">Next</a>');
            $('div.table-cont').animate({opacity:1,marginLeft:0},{ duration: 300, queue: false });
            $('a.coupon_link').click(function() { next_slide(); });
        }
        function next_slide() {
$('div.table-coupons').css('display','block');
$('div.table-cont').css('display','block');

            $('div.table-cont').animate({opacity:0,marginLeft:-200},{ duration: 300, queue: false, complete:function(){$(this).css('display', 'none')}});
            $('div.table-coupons').html('HELLO again! <a href="#" class="back_link">Back</a>');
            $('div.table-coupons').animate({opacity:1,marginLeft:0},{ duration: 300, queue: false });
            $('a.back_link').click(function() { back_slide(); });            
        } 
        function back_slide() {    
            calltable();            
        }            

 });

JSFiddle： http: //jsfiddle.net/97pcj/1/

于 2012-11-25T05:54:41.013 に答える
0

コードを見ずに言うのは難しいですが、要素を必要な場所に配置するCSSを前後に理解できれば、jQueryanimate関数を使用できます。あなたがしなければならないのは、それらを初期位置に置いてから、それらを配置したい最終位置のパラメーターを使用してそれらに対してanimate関数を呼び出すことです。残りはjQueryが処理します。たとえば、マージンが0pxの元の位置の左側に400px移動する必要があるとします。

$("#div").animate({marginLeft: -400px});
于 2012-11-24T21:42:21.950 に答える
0

左に移動するかどうかわからない場合、または「スライド」と言う場合は、slideUp（）およびslideDown（）のように意味します。あなたが後者を意味するなら

$(this).animate({width:'toggle'},400);
于 2012-11-24T21:44:27.973 に答える