Question

我是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。{/ p>

Answer 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;

在没有队列的情况下在Jquery中同时触发的事件

1 个答案: