jQuery और Zoomooz.js के बीच संघर्ष: एक ही समय में एनिमेट करें और ज़ूम लक्ष्य करें

मैं मनोविज्ञान में एक शोध परियोजना कर रहा हूं, इसलिए मैं वास्तव में जावास्क्रिप्ट में एक शुरुआतकर्ता हूं। फिर भी, मुझे यह करना है और यह बहुत विशिष्ट है।jQuery और Zoomooz.js के बीच संघर्ष: एक ही समय में एनिमेट करें और ज़ूम लक्ष्य करें

मैं क्लिक पर किसी पृष्ठ (एक पुस्तक कवर) के तत्व पर ज़ूम करना चाहता हूं, उसके पास एक ही समय में कुछ अतिरिक्त सामग्री खोलना है (कुछ पाठ) और मैं बाहर निकलने में सक्षम होना चाहता हूं (टेक्स्ट बंद करें और ज़ूम आउट करें) एक क्लिक में।

अब तक, मैं zoomooz.js के साथ ज़ूमिंग भाग को आसान बनाने में कामयाब रहा और मुझे बाकी के साथ jQuery मिल गया। मेरा पुस्तक कवर और मेरा टेक्स्ट पेज (प्रत्येक एक div) एक दूसरे के शीर्ष पर एक बड़े div ("कंटेनर") में हैं। जब कंटेनर क्लिक किया जाता है, कवर और टेक्स्ट एनिमेटेड हो जाता है: बाईं ओर एक चाल, दूसरी दाईं ओर। कंटेनर से बाहर निकलने पर और स्टॉपप्रॉपैगेशन का उपयोग करके, वे मध्य में एक साथ वापस आते हैं, योजना के रूप में कवर के पीछे पाठ छुपाते हैं।

अब मेरी समस्या यह है कि जब मैं अपने divs एनिमेट करते समय ज़ूमूज़ का उपयोग करने का प्रयास करता हूं, तो वे संघर्ष करते हैं। जिस तरह से, ज़ूम इन, ठीक काम करता है: एक ही समय में ज़ूमिंग और एनीमेशन। लेकिन वापस रास्ते के लिए, ज़ूम आउट, मैं उन्हें एक साथ काम करने के लिए नहीं मिल सकता है। ज़ूमूज़ खत्म हो जाता है। मैंने ज़ूमूज़ को हाथ से कोड करने की कोशिश की लेकिन मुझे नहीं पता कि मैं क्या कर रहा हूं- मुझे बस एक एहसास है कि इसे कहीं "स्टॉपप्रोपैगेशन" के साथ करना है।

यहां मेरा मॉक-अप/परीक्षण पृष्ठ है, इसमें सब कुछ शामिल है और चीजों को स्पष्ट करना चाहिए। अगर कोई मुझे हाथ दे सकता तो मैं बहुत खुश रहूंगा। बहुत बहुत धन्यवाद।

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

स्रोत

2012-11-28 MartinGalilee

मुझे मिल गया!

वास्तव में बहुत सरल है। ज़ूम आउट करने के लिए, मुझे शरीर को ज़ूम करने का आदेश देना पड़ा। अपने आप में "ज़ूम आउट करके" कोडिंग देखें:

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

और अधिक intricated उपयोग के लिए एक उदाहरण के रूप, कार्यों के पूरे सेट एक साथ:

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

स्रोत

2012-11-28 21:36:44 MartinGalilee

jQuery और Zoomooz.js के बीच संघर्ष: एक ही समय में एनिमेट करें और ज़ूम लक्ष्य करें

उत्तर

संबंधित मुद्दे