私は心理学の研究プロジェクトを行っているので、JavaScriptの初心者です。それでも、私はこれを行う必要があり、それは非常に具体的です。jQueryとZoomooz.jsとの衝突：animateとzoomTargetを同時に使用する
クリック時にページの要素（ブックカバー）を拡大し、同時にその横に（何らかのテキストで）余分な内容を開いておきたい場合は、テキストを閉じることができますズームアウト）をワンクリックで実行できます。
これまでのところ、私はズームの部分をzoomooz.jsで簡単にすることができました。残りはjQueryで残りました。私のブックカバーと私のテキストページ（それぞれ1つのdiv）は、より大きなdiv（「コンテナ」）の上にお互いの上にあります。コンテナがクリックされると、カバーとテキストがアニメ化されます：一方は左に移動し、もう一方は右に移動します。コンテナをクリックしてstopPropagationを使用すると、それらは中央で元に戻って、計画どおりにテキストを隠蔽します。
私の問題は、私がdivをアニメーション化している間にzoomoozを使用しようとすると、それらが衝突することです。ズームインとアニメーションを同時に行うことができます。しかし、戻って、ズームアウト、私は一緒に働くことができません。 Zoomoozが引き継ぎます。私は手でズームズームをコーディングしようとしましたが、私は何をしているのかわかりません - 私はちょうど "stopPropagation"とどこかにあるという気持ちがあります。
ここに私のモックアップ/テストページがあります。すべてが含まれており、物事をより明確にする必要があります。誰かが私に手を差し伸べることができれば、私はとても幸せになるだろう本当にありがとう。
<!DOCTYPE html>
<html>
<head>
<style>
div#main {background:yellow;z-index:1;}
div#container {position:relative;
width:232px;height:152px;border:2px dotted black;
background:#eee;margin:0 auto;z-index:10;}
div.cover {z-index:30;position:absolute;left:58px;
background:blue;width:116px;height:152px}
div.text {z-index:20;position:absolute;left:58px;
background:green;width:116px;height:152px}
p {font-size:0.3em;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- ZOOMOOZ-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.zoomooz.min.js"></script>
<script type="text/javascript" src="src/js/jquery.zoomooz-helpers.js"></script>
<script type="text/javascript" src="src/js/jquery.zoomooz-anim.js"></script>
<script type="text/javascript" src="src/js/jquery.zoomooz-core.js"></script>
<script type="text/javascript" src="src/js/jquery.zoomooz-zoomTarget.js"></script>
<script type="text/javascript" src="src/js/jquery.zoomooz-zoomContainer.js"></script>
<script type="text/javascript" src="src/js/purecssmatrix.js"></script>
<script type="text/javascript" src="src/js/sylvester.src.stripped.js"></script>
</head>
<body>
<div id="main">
<div id="container"> <!--ADD A class="zoomTarget" TO HAVE THE ZOOMING WORKING FINE BUT ONLY ONE WAY -->
<div class="text">
<p>aefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhze</p>
<p>aefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhze</p>
<p>aefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhzeaefpize gfo hzefoihze fozeoifhze</p>
</div>
<div class="cover">
</div>
</div>
</div>
</div>
<!-- script COVER + CONTENTS-->
<script>
$(document).ready(function() {
$("#container").click(function(e) {
$(".cover").animate({left: '0px'});
$(".text").animate({left: '116px'});
e.stopPropagation();
});
$(document).click(function() {
$(".cover").animate({left: '58px'});
$(".text").animate({left: '58px'});
});
});
</script>
</body>
</html>