Conflitto tra jQuery e Zoomooz.js: animate e zoomTarget allo stesso tempo

Sto facendo un progetto di ricerca in Psicologia, quindi sono davvero un principiante in JavaScript. Eppure, devo farlo ed è molto specifico.Conflitto tra jQuery e Zoomooz.js: animate e zoomTarget allo stesso tempo

Voglio zoomare su un elemento di una pagina (una copertina di un libro) al clic, avere altri contenuti che si aprono accanto ad esso allo stesso tempo (del testo) e voglio essere in grado di uscire (chiudi il testo e zoom indietro) in un clic.

Finora, sono riuscito a semplificare la parte di zoom con zoomooz.js e ho ottenuto il resto con jQuery. La copertina del mio libro e la mia pagina di testo (una div ciascuna) sono sovrapposte in un div più grande ("contenitore"). Quando si fa clic sul contenitore, la copertina e il testo vengono animati: uno si sposta a sinistra, l'altro a destra. All'uscita dal container e usando stopPropagation, tornano insieme nel mezzo, nascondendo il testo dietro la copertina come pianificato.

Ora il mio problema è che quando provo a usare zoomooz mentre si animano i miei div, entrano in conflitto. Il modo in cui, con lo zoom, funziona bene: zoom e animazione allo stesso tempo. Ma per la via del ritorno, lo zoom indietro, non riesco a farli lavorare insieme. Zoomooz prende il sopravvento. Ho provato a codificare zoomooz a mano ma non so cosa faccio - ho solo la sensazione che abbia a che fare con un "stopPropagation" da qualche parte.

Qui sotto c'è la mia pagina di prova/test, contiene tutto e dovrebbe chiarire le cose. Sarei così felice se qualcuno potesse darmi una mano. Grazie mille.

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

fonte

2012-11-28 MartinGalilee

Ho capito!

Abbastanza semplice, infatti. Per rimpicciolire, ho dovuto ordinare lo zoom sul corpo. Vedere la codifica "zoom out" di per sé:

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

E come esempio per un uso più intricated, l'intera serie di funzioni insieme:

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

fonte

2012-11-28 21:36:44 MartinGalilee

Conflitto tra jQuery e Zoomooz.js: animate e zoomTarget allo stesso tempo

risposta

Problemi correlati