2

我是 jquery 的新手。

这个想法是创建两个 div，当单击它时，单击的 div 会增加大小，而另一个会减小。这两个 div 在单击时会有一个链接，该 div 将独立翻转，不会影响另一个 div。

我有两个 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 移动到新位置并最大化或增加大小的原因（看起来像排队，但不是！）是因为，我通过给

-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 回答