2

私はjqueryが初めてです。

アイデアは、2 つの div を作成して、クリックすると、クリックされた div のサイズが大きくなり、他の div のサイズが小さくなるというものです。これら 2 つの div はクリックするとリンクを持ち、その div は独立して反転し、他の div には影響しません。

内部のリンクをクリックすると独立して反転する 2 つの div (div1 と div2 など) があります。div（ここではdiv1と言います）をクリックすると、cssで定義したクラスの最大化を追加して最大化します。他のクラスを最小化します。私はすべてを達成することができます..しかし、イベントは一つずつ起こっています. これは本当に奇妙に見えます。以下にコードを掲載しています。

$('.recharge-panel').click(function (e) {
    $(".search-panel .flipper").hide();
    $('.recharge-panel').removeClass('minimized');
    $('.recharge-panel').addClass('maximized');
    $('.search-panel').addClass('minimized');
    $('.search-panel').removeClass('flip');
    $(".recharge-panel .flipper").show();
});
$('.search-panel').click(function (e) {
            $(".recharge-panel .flipper").hide();
            $('.search-panel').removeClass('minimized');
            $('.search-panel').addClass('maximized');
            $('.recharge-panel').addClass('minimized');
            $('.recharge-panel').removeClass('flip');
            $(".search-panel .flipper").show();
});

そして、htmlは次のようになります

<div id="home-content-container4">  
<div id="div-box-container">
<div id="recharge-panel" class="contact homepanel recharge-panel">
    <div id="rechargefy" class="front">
        <p>This is the front side</p>
        <a class="flipper flipBack" href="#">Flip</a>
    </div>
    <div id="rechargefy" class="back">
        <p>This is the back side</p>
        <a class="flipper flipFront" href="#">Flip</a>
    </div>
</div>

<div class="contact homepanel search-panel second-panel">
    <div id="planSearch" class="front">
        <p>This is the front side</p>
        <a class="flipper flipBack" href="#">Flip</a>
    </div>
    <div id="planSearch" class="back">
        <p>This is the back side</p>
        <a class="flipper flipFront" href="#">Flip</a>
    </div>
</div>
</div>

css は次のとおりです。

.maximized {
width: 500px;
height: 400px;
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;}

.minimized {
width: 300px;
height: 200px;
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;}

#div-box-container{
position: relative;
height: 600px;
width: 1024px;
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;}

.homepanel {
float: left;
width: 400px;
height: 300px;
font-size: .8em;
margin-left: 10px;
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;           
-webkit-perspective: 600px;
-moz-perspective: 600px;
font-family: "Lato","Lucida Grande","Lucida Sans Unicode","Trebuchet MS",Helvetica,Arial,Verdana,sans-serif;

} 私は私が台無しにしたことを知っています..誰かがこれで私を助けることができれば、それは本当に素晴らしいことです!!

この効果を達成するための他の方法があれば教えてください。

効果の最大化と最小化については http://www.hipmunk.comにアクセスし、フリッピングについてはhttp://css3playground.com/flip-card.phpにアクセスしてください。

4

1 に答える 1

1

div が新しい位置に移動し、サイズを最大化または拡大する理由 (キューイングのように見えますが、そうではありません!) は、与えて div を完全にアニメーション化したためです。

-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;

代わりに、上部をアニメーション化してそのままにするだけです。

-o-transition: left 0.3s ease-out,top 0.3s ease-out;
-ms-transition: left 0.3s ease-out,top 0.3s ease-out;
-moz-transition: left 0.3s ease-out,top 0.3s ease-out;
-webkit-transition: left 0.3s ease-out,top 0.3s ease-out;
transition: left 0.3s ease-out,top 0.3s ease-out;
于 2013-05-29T11:05:36.180 に答える