如何动画选定的卡片同时具有翻转和弹出效果

Question

我正在准备一个带有jquery效果的网络纸牌游戏的演示

我已经完成了交换效果，但是当用户选择卡时，我必须做一个效果，就像卡片在同一时间翻转和弹出一样。

当我点击任何一张卡时，它会显示它应该如何在覆盖中心的中央翻转和弹出。

我已尝试过jquery的mflip插件，但无法同时弹出该卡。

如何动画所选卡片同时具有翻转和弹出效果？

＆＃13;

＆＃13;

$(document).ready(function() { 
		
		var swapperarray = [];
            swapperarray[0] = ['div_3', 'div_1'];
            swapperarray[1] = ['div_3', 'div_4'];
            swapperarray[2] = ['div_7', 'div_8'];
            swapperarray[3] = ['div_9', 'div_2'];
            swapperarray[4] = ['div_2', 'div_7'];
            swapperarray[5] = ['div_5', 'div_6'];
            swapperarray[6] = ['div_8', 'div_7'];
            swapperarray[7] = ['div_1', 'div_4'];
            swapperarray[8] = ['div_6', 'div_9'];
            swapperarray[9] = ['div_3', 'div_7'];
            
           $('#'+swapperarray[0][0]).swap(createOptions(swapperarray))
});
 function createOptions(swapperarray){
       var obj = {};
			
      if(swapperarray.length > 1){
        var pair = swapperarray.shift();
        obj.target = pair[1];
        obj.opacity = "1";
        obj.speed = 600;
        obj.callback = function (){ $('#'+swapperarray[0][0]).swap(createOptions(swapperarray)) }
      }
      else 
			{
        var pair = swapperarray.shift()
        obj.target = pair[1]
        obj.opacity = "1"
        obj.speed = 600
      }
			if(swapperarray.length == 0)
			{
				$('.cards').addClass("Flipper");
				$('.cards').addClass("FlipperShadow");
				$('.overlay').hide();
				ShadowStarter()
				
			}
      return obj;
			
    }
function ShadowStarter()
{
	setInterval(function ()
	{
		$('.Flipper').toggleClass("FlipperShadow");
	},1000)
}
$(document).ready(function ()
{
	$('body').on("click",'.Flipper',function ()
	{
		
		$('.Flipper').removeClass("Flipper");
		$('.FlipperShadow').removeClass("FlipperShadow");
		var leftclass = $(this).attr('id');
		//$(this).addClass("popout");
	});
	$(".cards").flip();




});

＆＃13;

.cards {
	width:120px;
	height:160px;
	border:1px solid #1d174f;
	border-radius:5px;
	float:left;
	margin:5px;
	text-align:center;
	padding:5px;
}
.cards img
{
	width:90%;
	margin-top:10%;
}
.cards:hover
{
	cursor:pointer;
}
.Blocks
{
	  display: block;
    width: 428px;
    height: auto;
    float: left;
		clear:both;
}
.actionbar
{
	clear:both;
	float:left;
	width:100%;
}



.FlipperShadow {
  box-shadow: 0px 2px 11px 0px #1d174f;
  transition: box-shadow 0.3s ease-in-out;
}

/* Transition to a bigger shadow on hover */
.FlipperShadow:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* The fast way */
.FlipperShadow {
  box-shadow: 0px 2px 11px 0px #1d174f;
}

/* Pre-render the bigger shadow, but hide it */
.FlipperShadow::after {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Transition to showing the bigger shadow on hover */
.FlipperShadow:hover::after {
  opacity: 1;
}

.FlipperShadow
{
	/*box-shadow: 0px 2px 11px 0px #1d174f;*/
}
.clearfix
{
	clear:both;
}

.overlay
{
	 width: 428px;
	 height: 100%;
	 position: absolute;
	 background: #0020;
	 z-index: 9999;
	
}
.popout 
{
		animation: popout 1s ease;
		-webkit-animation: popout 1s ease;
}
@keyframes popout {
		from{transform:scale(0)}
		80%{transform:scale(1.2)}
		to{transform:scale(1)}
}
@-webkit-keyframes popout {
		from{-webkit-transform:scale(0)}
		80%{-webkit-transform:scale(1.2)}
		to{-webkit-transform:scale(1)}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://sgmobilepos.com/cardgame/js/jquery.flip.min.js"></script>
<script src="https://sgmobilepos.com/cardgame/js/jquery-swapsies.js"></script>
<div class="Blocks">
	<div class="overlay"></div>	
		<div class="cards" id="div_1">
			<div class="front"><img src="1.png"></div>
			<div class="back">Ans is here</div>
		</div>
		<div class="cards" id="div_2">
			<div class="front"><img src="1.png"></div>
			<div class="back">Ans is here</div>
		</div>
		<div class="cards" id="div_3">
			<div class="front"><img src="1.png"></div>
			<div class="back">Ans is here</div>
		</div>
		<div class="cards" id="div_4">
			<div class="front"><img src="1.png"></div>
			<div class="back">Ans is here</div>
		</div>
		<div class="cards" id="div_5">
			<div class="front"><img src="1.png"></div>
			<div class="back">Ans is here</div>
		</div>
		<div class="cards" id="div_6"
			><div class="front"><img src="1.png"></div>
			<div class="back">Ans is here</div>
		</div>
		<div class="cards" id="div_7">
			<div class="front"><img src="1.png"></div>
			<div class="back">Ans is here</div>
		</div>
		<div class="cards" id="div_8">
			<div class="front"><img src="1.png"></div>
			<div class="back">Ans is here</div>
		</div>
		<div class="cards" id="div_9">
			<div class="front"><img src="1.png"></div>
			<div class="back">Ans is here</div>
		</div>
	
</div>

＆＃13;

＆＃13;

＆＃13;