पहले बच्चे को अंत में कैसे स्थानांतरित करें?

Question

मेरे पास div कंटेनर में कुछ div आइटम हैं और मैं उन्हें लगातार एनिमेट करना चाहता हूं।

मुझे पता है कि अंतहीन पाश में अपना फ़ंक्शन कैसे चलाया जाए, लेकिन पहले div को चुनने में कोई समस्या है, इसे एनिमेट करें और इसे एनीमेशन के बाद अंत में ले जाएं।

मेरी समारोह इस तरह दिखता है:

function MoveItems() { 
     $(".container:first").animate(
      {width: "0px"}, 
      1000, 
      function(){ 
       $('.container').append($(this)); 
       $('.container').remove($(this)); 
      } 
     ); 
}; 

क्या मैं गलत कर रहा हूँ? ;/

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

आप सही के बारे में हटाने रहे हैं, लेकिन एनीमेशन अभी भी काम नहीं कर रहा है।

मुझे लगता है कि चयनकर्ता मूल रूप से काम नहीं कर रहा है।

मेरी एचटीएमएल है:

<div class="container"> 
<div class="image"><a href=""><img src="img/image001.jpg" /><span>IMAGE001</span></a></div> 
<div class="image"><a href=""><img src="img/image002.jpg" /><span>IMAGE002</span></a></div> 
<div class="image"><a href=""><img src="img/image003.jpg" /><span>IMAGE003</span></a></div> 
    <div class="image"><a href=""><img src="img/image004.jpg" /><span>IMAGE004</span></a></div> 
</div> 

लेकिन समारोह MoveItems चलाने के बाद एक बार होती है:

<div class="container" style="width: 0px; overflow: hidden;"> 
    <div class="image"><a href=""><img src="img/image001.jpg"><span>IMAGE001</span></a></div> 
    <div class="image"><a href=""><img src="img/image002.jpg"><span>IMAGE002</span></a></div> 
    <div class="image"><a href=""><img src="img/image003.jpg"><span>IMAGE003</span></a></div> 
    <div class="image"><a href=""><img src="img/image004.jpg"><span>IMAGE004</span></a></div> 
</div> 

इसलिए कार्यों नहीं कंटेनर के एक पहले बच्चे .container पर काम कर रहा है। क्या मैं यहाँ और अधिक specyfic हूँ? :)

Answer 1

$(".container:first") पहले का चयन करता है। इसे प्राप्तकर्ता।

आप $(".container>div:first")

तुम भी "में तेजी लाने के" कर सकते हैं अंतिम निकालें/बजाय माता पिता पर काम .container के लिए एक और डोम खोज करके संलग्न:

var $me = $(this); 
$me.parent().append($me); 

Answer 2

निकालें इस लाइन:

$('.container').remove($(this)); 

संलग्न() एक प्रतिलिपि बनाने नहीं है, यह लक्ष्य के अंत तक अपनी मौजूदा स्थिति से चयनित वस्तुओं ले जाता है।

Answer 3

append स्वचालित रूप से बच्चे को माता-पिता से हटा देता है और अंत में इसे स्थानांतरित करता है। remove इसे वापस जोड़ने के बिना बच्चे को फिर से हटा देगा। $('.container').remove($(this));

Answer 4

यहाँ एक और अधिक व्यावहारिक उदाहरण है:: http://jsfiddle.net/8KyCD/1/

यह इतना है कि आप किसी भी तत्व पर आइटम चेतन कर सकते हैं एक jQuery प्लगइन बनाता है

बस लाइन छोड़ देते हैं। मैं इसे पाश करने के लिए सेट नहीं किया है, जैसा कि आप ने कहा कि आप पहले से ही पता है कि कैसे करना है;)

संपादित करें: यहाँ एक और उदाहरण है कि तत्व को छुपाता है, तो यह पता चलता है, और हमेशा के लिए पुनर्प्रसारण: http://jsfiddle.net/8KyCD/5/(documented code)