jQuery का उपयोग कर। सेने को दाएं से बाएं को एनिमेट करने के लिए एनिमेट करें?

मेरे पास top: 0px और right: 0px पर पूरी तरह से एक div है, और मैं इसे वर्तमान स्थिति से left: 0px पर एनिमेट करने के लिए jquery's .animate() का उपयोग करना चाहता हूं। कोई इसे कैसे करता है? मैं इस काम करने के लिए प्राप्त करने के लिए प्रतीत नहीं कर सकते हैं:jQuery का उपयोग कर। सेने को दाएं से बाएं को एनिमेट करने के लिए एनिमेट करें?

$("#coolDiv").animate({"left":"0px"}, "slow");

क्यों यह काम और कैसे एक पूरा करता नहीं है कि मैं क्या करने के लिए देख रहा हूँ?

धन्यवाद !!

स्रोत

2010-06-15 Alex

मुझे लगता है कि कारण यह काम नहीं करता सच है कि आप right स्थिति सेट है कि के साथ कुछ है, लेकिन नहीं left।

लाइव उदाहरण:http://jsfiddle.net/XqqtN/

var left = $('#coolDiv').offset().left; // Get the calculated left position 

$("#coolDiv").css({left:left}) // Set the left to its calculated position 
      .animate({"left":"0px"}, "slow");

संपादित करें:

के रूप में प्रकट होता है

आप मैन्युअल रूप से वर्तमान स्थिति के लिए left सेट करते हैं, यह जाने के लिए लगता है हालांकि फ़ायरफ़ॉक्स अपेक्षित व्यवहार करता है क्योंकि इसकी गणना एड left स्थिति पिक्सेल में सही मान के रूप में उपलब्ध है, जबकि वेबकिट आधारित ब्राउज़र, और जाहिर है आईई, बाएं स्थिति के लिए auto का मान लौटाएं।

क्योंकि auto एनीमेशन के लिए प्रारंभिक स्थिति नहीं है, एनीमेशन प्रभावी ढंग से 0 से 0 तक चलता है। देखना बहुत दिलचस्प नहीं है। : ओ)

उपरोक्त के रूप में एनिमेट के पहले मैन्युअल रूप से बाएं स्थिति को सेट करना समस्या को हल करता है।

आप चर के साथ परिदृश्य को अव्यवस्थित पसंद नहीं है, तो यहां एक चर के लिए की जरूरत है obviates एक ही बात का एक अच्छा संस्करण है:

$("#coolDiv").css('left', function(){ return $(this).offset().left; }) 
      .animate({"left":"0px"}, "slow");

स्रोत

2010-06-15 02:11:22 user113716

jQuery स्रोत http://jax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js के पढ़ने में, स्थिति निर्धारण के लिए jQuery पहले से ही "शीर्ष" और " हुड के नीचे "रिश्तेदार" छोड़ा "- मेरा मानना है कि आपका जवाब गलत है। उदाहरण के लिए, मेरा उदाहरण सही रूप से सीएसएस मान सेट होने के बावजूद काम करता है, और एनिमेट मान बाईं ओर सेट किया जा रहा है। – artlung

@artlung - लिंक के लिए धन्यवाद, लेकिन आप किस ब्राउजर में परीक्षण किया था? मैं सफारी में परीक्षण कर रहा हूं, और एनीमेशन बाएं स्थिति को सेट किए बिना काम नहीं करता है। यह सीधे बाएं कूदता है, संभावित रूप से बाईं ओर 'ऑटो' के प्रारंभिक मूल्य के परिणामस्वरूप। – user113716

फ़ायरफ़ॉक्स में परीक्षण किया और महान काम किया। जैसा कि आपने इंगित किया है, पिकुलियर, क्रोम और सफारी व्यवहार करते हैं। तो यह सही स्थिति में/बदल रहा/कर रहा है, लेकिन यह अंतरिम एफएक्स नहीं दिखा रहा है! JQueryUI जोड़ना (जो माना जाता है कि अतिरिक्त चीजों को एनिमेट करने की अनुमति देता है सामान्य jQuery नहीं कर सकता) क्रोम और सफारी के लिए कोई बदलाव नहीं करता है। – artlung

यहाँ एक न्यूनतम जवाब यह है कि अपने उदाहरण से काम कर रहा से पता चलता है:

<html> 
<head> 
<title>hello.world.animate()</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" 
    type="text/javascript"></script> 
<style type="text/css"> 
#coolDiv { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 200px; 
    background-color: #ccc; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function() { 
    // this way works fine for Firefox, but 
    // Chrome and Safari can't do it. 
    $("#coolDiv").animate({'left':0}, "slow"); 
    // So basically if you *start* with a right position 
    // then stick to animating to another right position 
    // to do that, get the window width minus the width of your div: 
$("#coolDiv").animate({'right':($('body').innerWidth()-$('#coolDiv').width())}, 'slow'); 
    // sorry that's so ugly! 
}); 
</script> 
</head> 
<body> 
    <div style="" id="coolDiv">HELLO</div> 
</body> 
</html>

मूल उत्तर:

आपके पास:

$("#coolDiv").animate({"left":"0px", "slow");

सही किया:

$("#coolDiv").animate({"left":"0px"}, "slow");

प्रलेखन: http://api.jquery.com/animate/

स्रोत

2010-06-15 02:03:07 artlung

मेरे क्षमा करें, लेकिन है कि एक साधारण कॉपी/पेस्ट त्रुटि, नहीं था समस्या। – Alex

'सही' स्थिति एनिमेटिंग ... वैध विकल्प। : ओ) – user113716

तो .animate विधि केवल तभी काम करता है आपने किसी तत्व को स्थिति विशेषता दी है, अगर नहीं तो यह हिल नहीं गया?

उदाहरण के लिए मैंने देखा है कि अगर मैं div घोषित करता हूं लेकिन मैं सीएसएस में कुछ भी नहीं घोषित करता हूं, तो यह उसकी डिफ़ॉल्ट स्थिति नहीं मानता है और यह पृष्ठ में नहीं ले जाता है, भले ही मैं संपत्ति मार्जिन घोषित करता हूं: x w y z;

स्रोत

2013-03-15 10:34:37

इस के लिए मुझे

$("div").css({"left":"2000px"}).animate({"left":"0px"}, "slow");

स्रोत

2014-05-15 09:02:40

काम आप चाइल्ड तत्व आप एनिमेट कर रहे हैं, तो आप उपयोग कर सकते हैं और एक मार्जिन के रूप में अच्छी तरह से भरपाई चेतन की चौड़ाई पता है। सही करने के लिए 0: उदाहरण के लिए, इस बाएं से चेतन 0

सीएसएस:

.parent{ 
width:100%; 
position:relative; 
} 

#itemToMove{ 
position:absolute; 
width:150px; 
right:100%; 
margin-right:-150px; 
}

जावास्क्रिप्ट:

$("#itemToMove").animate({ 
"margin-right": "0", 
"right": "0" 
}, 1000);

स्रोत

2015-08-01 19:03:31 freeworlder

jQuery का उपयोग कर। सेने को दाएं से बाएं को एनिमेट करने के लिए एनिमेट करें?

उत्तर

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