[英]Conflict between jQuery and Zoomooz.js: animate & zoomTarget at the same time
我正在做一个心理学研究项目,所以我真的是JavaScript的初学者。 不过,我必须完成这项工作并且非常具体。
我想在点击时放大页面的元素(书籍封面),同时在它旁边打开额外的内容(一些文字),我希望能够离开(关闭文本并缩小只需点击一下。
到目前为止,我设法使用zoomooz.js轻松缩放部分,然后我用jQuery完成了其余部分。 我的书封面和我的文字页面(每个一个div)在一个更大的div(“容器”)中彼此叠加。 单击容器时,封面和文本会变为动画:一个在左侧移动,另一个在右侧移动。 点击容器并使用stopPropagation后,它们会在中间重新组合在一起,按照计划将文本隐藏在封面后面。
现在我的问题是,当我尝试在动画我的div时使用zoomooz时,它们会发生冲突。 那里的方式,放大,工作正常:同时缩放和动画。 但是对于回来的方式,缩小,我无法让他们一起工作。 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>
我知道了!
事实上非常简单。 要缩小,我不得不命令缩放到身体。 请参见“缩小”编码:
<script>
$(document).click(function() {
$('body').zoomTo({targetsize:0.75, duration:600});
});
</script>
作为更复杂的使用的一个例子,整个功能集合在一起:
<script>
$(document).ready(function() {
$(".cover").click(function(e) {
$(this).animate({left: '0px'});
$(this).siblings(".text").animate({left: '116px'});
$(this).parent().siblings().fadeOut();
$(this).parent().zoomTo({targetsize:0.75, duration:600});
e.stopPropagation();
});
$(document).click(function() {
$(".cover").animate({left: '58px'});
$(".text").animate({left: '58px'});
$(".container").fadeIn();
$('body').zoomTo({targetsize:0.75, duration:600});
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.