如何使用jQuery來動畫一個小孩而不是其他人？

嘿，我已經用jQuery（第一個真正的jQuery項目）從頭開始寫這段代碼，到目前爲止，我有一些切換動畫。我的代碼如下所示：如何使用jQuery來動畫一個小孩而不是其他人？

HTML

<div id="content">  
    <div class="featured-img one"> 
     <img src="media/desktopography.png" alt="Desktopography"/> 
    </div><!-- end .featured-img --> 

    <div class="featured-img two"> 
     <img src="media/dancer.png" alt="Dancer"/> 
    </div><!-- end .featured-img --> 

    <div class="featured-img three"> 
     <img src="media/tech.png" alt="Tech"/> 
    </div><!-- end .featured-img --> 

    <div class="featured-img four"> 
     <img src="media/strawberry-tree.png" alt="Strawberry Tree"/> 
    </div><!-- end .featured-img --> 

    <div class="featured-img five"> 
     <img src="media/snow-leopard.png" alt="Snow Leopard"/> 
    </div><!-- end .featured-img --> 
</div><!-- end #content -->

jQuery的

$(document).ready(function(){ 
    $('.featured-img').toggle(
    function() { 
    $(this).animate({ 
      height: "600px", 
      marginTop: "-100px" 
}, 500); 
     $(".featured-img > img").animate({ 
      marginTop: "0px" 
}, 500); 
    }, 
    function() { 
    $(this).animate({ 
      height: "150px", 
      marginTop: "100px" 
}, 1500); 
     $(".featured-img > img").animate({ 
      marginTop: "-200px" 
}, 1500); 
    } 
    ); 
});

這正常工作與一個元素，但它適用同樣的動畫分配.featured-每一個元素img每次點擊。有什麼方法可以讓我點擊的元素動起來，而不會打擾其他元素？

我嘗試過玩：not（：animated）和其他東西，但它只會讓它變得更糟。我將不勝感激任何幫助或建議。

在此先感謝！

來源

2009-11-16 Michal Kopanski

如果您有在線可用，您可以提供該頁面的鏈接嗎？看看發生了什麼以及如何構建HTML會很有幫助。 – 2009-11-16 04:41:32

你的意思是你不想讓其他元素在動畫時移動，或者每次單擊時都會動畫所有元素？ – beggs 2009-11-16 04:57:00

@Frank DeRosa：我已經將HTML添加到問題中，並且可以在此處找到正在進行的工作：http://projects.michalkopanski.com/PHOTOPortfolio/v2/。另外，一次只能打開一個元素會變得多麼困難？ @beggs：對不起，我不想清楚這一點，我想只有一個元素移動，其他人保持靜止，這將是我點擊的元素。感謝你們倆。 – 2009-11-16 06:07:30

嘿大家，在做了一些更多的研究後，我找到了答案。我從一開始就知道其他對象是動畫的原因，因爲這些類是在整個場景中共享的。避免這種情況的方法是僅使用jQuery子選擇器$(this).children()單擊我們單擊的元素的子元素。你可以看到功能演示here。我的代碼看起來像這樣：

$(document).ready(function(){ 
    $('.featured-img').toggle(
     function() { 
      $(this).animate({ 
       height: "593px", 
       marginTop: "-100px" 
     }, 500); 
      $(this).children().animate({ 
       marginTop: "0px" 
     }, 500); 
     }, 
     function() { 
      $(this).animate({ 
       height: "150px", 
       marginTop: "100px" 
     }, 1500); 
      $(this).children().animate({ 
       marginTop: "-200px" 
     }, 1500); 
     } 
    ); 
    });

我希望你們已經學到了新的東西。感謝所有幫助過的人。

來源

2009-11-16 09:01:35

如何使用jQuery來動畫一個小孩而不是其他人？

回答

相關問題