Konflikt zwischen jQuery und Zoomooz.js: animate & zoomTarget zur gleichen Zeit

Ich mache ein Forschungsprojekt in Psychologie, also bin ich wirklich ein Anfänger in JavaScript. Trotzdem muss ich das schaffen und es ist sehr spezifisch.Konflikt zwischen jQuery und Zoomooz.js: animate & zoomTarget zur gleichen Zeit

Ich möchte auf ein Element einer Seite (ein Buchumschlag) auf Klick zoomen, zusätzlichen Inhalt neben sich zur gleichen Zeit öffnen (etwas Text) und ich möchte rauskommen (Text schließen) und zoomen zurück) mit einem Klick.

Bisher gelang es mir, den Zoom-Teil einfach mit zoomooz.js zu haben und ich habe den Rest mit jQuery. Mein Buchcover und meine Textseite (jeweils ein div) sind übereinander in einem größeren div ("Container"). Wenn der Container angeklickt wird, werden Cover und Text animiert: Einer bewegt sich auf der linken, der andere auf der rechten Seite. Beim Klick aus dem Container und der Verwendung einer StopPropagation kommen sie wieder in der Mitte zusammen und verstecken den Text hinter dem Cover wie geplant.

Jetzt ist mein Problem, dass wenn ich versuche, Zoomooz zu verwenden, während meine divs animiert, sie Konflikt. Der Weg dorthin, Zooming, funktioniert gut: Zoomen und Animation gleichzeitig. Aber für den Rückweg, verkleinern, kann ich sie nicht zur Zusammenarbeit bringen. Zoomooz übernimmt. Ich habe versucht, zoomooz mit der Hand zu programmieren, aber ich weiß nicht, was ich mache - ich habe nur das Gefühl, dass es irgendwo mit einer "stopPropagation" zu tun hat.

Hier unten ist meine Mock-up/Testseite, sie enthält alles und sollte die Dinge klarer machen. Ich wäre so glücklich, wenn mir jemand helfen könnte. Vielen Dank.

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

Quelle

2012-11-28 MartinGalilee

Ich habe es!

Ziemlich einfach, in der Tat. Um herauszuzoomen, musste ich den Zoom auf den Körper ordnen. Siehe „Auszoomen“ Codierung von selbst:

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

Und als Beispiel für mehr intricated Verwendung, die ganze Reihe von Funktionen zusammen:

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

Quelle

2012-11-28 21:36:44 MartinGalilee

Konflikt zwischen jQuery und Zoomooz.js: animate & zoomTarget zur gleichen Zeit

Antwort

Verwandte Themen