Конфликт между jQuery и Zoomooz.js: animate & zoomTarget одновременно

Я занимаюсь исследовательским проектом в области психологии, поэтому я действительно начинающий в JavaScript. Тем не менее, я должен сделать это, и это очень конкретно.

Я хочу увеличить элемент страницы (обложку книги) при щелчке, рядом с ним открывается дополнительное содержимое (немного текста), и я хочу иметь возможность выйти (закрыть текст и уменьшить масштаб обратно).) в один клик.

До сих пор мне удалось облегчить масштабирование с помощью zoomooz.js, а остальное я получил с помощью jQuery. Моя обложка книги и моя текстовая страница (по одному div) расположены друг над другом в большем div ("контейнере"). При щелчке по контейнеру анимированные обложка и текст: один перемещается влево, другой - справа. При щелчке из контейнера и использовании stopPropagation они снова собираются в середине, скрывая текст за крышкой, как и планировалось.

Теперь моя проблема в том, что когда я пытаюсь использовать zoomooz во время анимации моих 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>
Источник

1 ответ

Я понял!

Довольно просто, на самом деле. Чтобы уменьшить масштаб, мне пришлось заказать масштабирование до тела. Посмотрите кодирование "уменьшения масштаба" само по себе:

<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>
Источник
Другие вопросы по тегам