Konflikt między jQuery i Zoomooz.js: animate i zoomTarget w tym samym czasie

Robię projekt badawczy w dziedzinie psychologii, więc jestem naprawdę początkującym w JavaScript. Mimo to muszę to zrobić i jest to bardzo szczegółowe.Konflikt między jQuery i Zoomooz.js: animate i zoomTarget w tym samym czasie

Chcę powiększyć element strony (okładkę książki) po kliknięciu, jednocześnie otwierając dodatkową zawartość (tekst) i chcę móc wyjść (zamknij tekst i pomniejszenie) jednym kliknięciem.

Do tej pory udało mi się łatwo powiększyć część z zoomooz.js, a resztę otrzymałem z jQuery. Moja okładka książki i moja strona tekstowa (po jednym div) są na wierzchu w większym div ("pojemniku"). Po kliknięciu kontenera animowana jest okładka i tekst: jeden przesuwa się po lewej, a drugi po prawej. Po kliknięciu kontenera i użyciu metody stopPropagation, wracają do siebie w środku, ukrywając tekst za oknem zgodnie z planem.

Teraz mój problem polega na tym, że kiedy próbuję użyć zoomooz podczas animowania moich divów, one są w konflikcie. Sposób, przybliżanie, działa dobrze: powiększanie i animacja w tym samym czasie. Ale w drodze powrotnej, pomniejszając, nie mogę zmusić ich do wspólnej pracy. Zoomooz przejmuje kontrolę. Próbowałem ręcznie kodować zoomooz, ale nie wiem, co robię - po prostu mam wrażenie, że ma coś wspólnego z "stopPropagacją".

Tutaj jest moja strona z makietami/testami, zawiera wszystko i powinna sprawić, że rzeczy będą wyraźniejsze. Byłbym bardzo szczęśliwy, gdyby ktoś mógł mi pomóc. Dzięki wielkie.

<!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>

Źródło

2012-11-28 MartinGalilee

Mam to!

Całkiem proste, w rzeczywistości. Aby pomniejszyć, musiałem zamówić powiększanie do ciała. Patrz „pomniejszania” kodowanie sama:

<script> 
$(document).click(function() { 
    $('body').zoomTo({targetsize:0.75, duration:600}); 
    }); 
</script>

I jako przykład więcej intricated użytku, cały zestaw funkcji razem:

<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>

Źródło

2012-11-28 21:36:44 MartinGalilee

Konflikt między jQuery i Zoomooz.js: animate i zoomTarget w tym samym czasie

Odpowiedz

Powiązane problemy