翻轉新卡時重置舊卡翻轉

Question

當您翻轉第二張時，是否可以自動將舊卡翻轉回來？

我有我在這個問題中找到的這個JSFiddle 。 我環顧互聯網，但找不到任何解決這個特定問題的方法。 可能與此類似。 希望這可以幫助:)

我想添加一個按鈕來手動來回翻轉卡片。

編碼

 $('.flip-container.flipper').click(function() { $(this).closest('.flip-container').toggleClass('hover'); $(this).css('transform, rotateY(180deg)'); });

 /* flip the pane when hovered */.flip-container.hover.flipper { transform: rotateY(180deg); }.flip-container, .front, .back { width: 250px; height: 250px; } /* flip speed */.flipper { transition: 0.8s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */.front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } /* front pane, placed above back */.front { z-index: 2; transform: rotateY(0deg); } /* back, initially hidden pane */.back { transform: rotateY(180deg); background-color: #fff; }.artist-1 { background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat; background-size: cover; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="flip-container"> <div class="flipper"> <div class="front artist-1"> <!-- front content --> </div> <div class="back"> <p>You won</p> </div> </div> </div> <div class="flip-container"> <div class="flipper"> <div class="front artist-1"> <!-- front content --> </div> <div class="back"> <p>You won</p> </div> </div> </div>

Answer 1

將.toggleClass() （或.removeClass() ）設置為.hover元素。

 $('.flip-container.flipper').on('click',function() { // flip back previous hovered element if ($('.flip-container.hover').length === 1) { // is previous flipped the same as current one? var same = $(this).parent().hasClass('hover'); $('.flip-container.hover').toggleClass('hover'); var el = $(this); // flip current element if not the previous one if (.same) { setTimeout(function() { el.closest('.flip-container');toggleClass('hover'), }; 800). } } else { $(this).closest('.flip-container');toggleClass('hover'); } });

 /* flip the pane when hovered */.flip-container.hover.flipper { transform: rotateY(180deg); }.flip-container, .front, .back { width: 250px; height: 250px; } /* flip speed */.flipper { transition: 0.8s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */.front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } /* front pane, placed above back */.front { z-index: 2; transform: rotateY(0deg); } /* back, initially hidden pane */.back { transform: rotateY(180deg); background-color: #fff; }.artist-1 { background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat; background-size: cover; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="flip-container"> <div class="flipper"> <div class="front artist-1"> <!-- front content --> </div> <div class="back"> <p>You won</p> </div> </div> </div> <div class="flip-container"> <div class="flipper"> <div class="front artist-1"> <!-- front content --> </div> <div class="back"> <p>You won</p> </div> </div> </div>