動畫多個div擴大崩潰問題

我努力讓這個圈子動畫展開崩潰的工作，你可以看看它here。問題是一旦點擊了一個圓圈，然後下一次你想擴大它時，第一次點擊不響應只有第二次點擊的作品。我認爲一個獲得id的函數將解決這個問題，但我不知道如何解決這個問題。動畫多個div擴大崩潰問題

這裏是我的代碼部分：

<ul class="circles"> 
<li> 
    <div> 
     <div class="clear"></div> 
     <p id="circle_info_1_toggle"><a href="#" >Products</a></p>       
    </div> 
</li> 
<li> 
    <div> 
     <div class="clear"></div> 
     <p id="circle_info_2_toggle"><a href="#" >Machinery</a></p>        
    </div> 
</li>

<div id="circles_info_container"> 
    <div id="circle_info_1"> 
     <div class="wrapper">        
      <h3>We use environmentally-friendly, non-toxic products in all of our work.</h3> 
      <a href="http://www.guarantee-green.com/our-products"><div class="circles_readmore"></div></a> 
     </div> 
    </div> 
    <div id="circle_info_2"> 
     <div class="wrapper">     
      <h3>We use powerful, modern machinery that removes dirt, grime and soil.</h3> 
      <a href="http://www.guarantee-green.com/our-methods"><div class="circles_readmore"></div></a> 
     </div> 
    </div>

和jQuery的：

$(document).ready(function() { 
/* Circle 1*/ 
$('#circle_info_1_toggle a').click(function() { return false; }); 
$('#circle_info_1_toggle a, #circle_info_1').toggle(circle_open_1, circle_close_1); 

/* Circle 2*/ 
$('#circle_info_2_toggle a').click(function() { return false; }); 
$('#circle_info_2_toggle a, #circle_info_2').toggle(circle_open_2, circle_close_2); 
}); 

// Functions 
function close_all_circles() { 
    $('#circle_info_1 .wrapper').animate({ height:'0px' }, {duration:250, queue:true}); 
    $('#circle_info_2 .wrapper').animate({ height:'0px' }, {duration:250, queue:true}); 
} 

    /* Circle 1*/ 
    function circle_open_1() { 
     close_all_circles(); 
     $('#circle_info_1 .wrapper').animate({ height:'120px' }, {duration:250}); 
    } 
    function circle_close_1() {  
      $('#circle_info_1 .wrapper').animate({ height:'0px' }, {duration:250, queue:false});   
    } 

    /* Circle 2*/ 
    function circle_open_2() { 
     close_all_circles(); 
     $('#circle_info_2 .wrapper').animate({ height:'120px' }, {duration:250}); 
    } 
    function circle_close_2() {  
      $('#circle_info_2 .wrapper').animate({ height:'0px' }, {duration:250, queue:false});   
    }

謝謝！

來源

2011-07-23 Doron

嘗試這樣：

$('#circles a').click(function() { 
    // close all. 
    $('#circles_info_container .wrapper').animate({ height:'0px' }, {duration:250, queue:true}); 

    // open clicked one. 
    var num = $(this).parent().attr('id').replace('circle_info_', '').replace('_toggle', ''); 
    $('#circle_info_' + num + ' .wrapper').animate({ height:'120px' }, {duration:250}); 
});

如果你想確保完成關閉動畫開始動畫開放之前，你可以做到這一點通過complete參數傳遞給animate()，這是一個委託一個動畫完成後調用的回調函數。

來源

2011-07-23 11:54:45 Kon

哇，真正縮短了我的代碼和偉大工程，謝謝！雖然我嘗試添加活動類和一些填充，它似乎並不能正常工作，也許你看一看。這是兩行我已經添加了打開和關閉 \t //關閉所有。 $（ '＃circle_info_' + NUM）.animate（{paddingBottom來： '0像素'}）; $（'。c'+ num）.removeClass（'active'）; //打開一個。（'。c'+ num）.addClass（'active'）; $（'paddingBottom：'20px'}）\t \t \t $（'＃circle_info_'+ num）.animate – Doron

現在你無法關閉它們。 – Doron

這是一個完全不同的問題，我不願意爲你做所有的工作（不妨僱用我）。你有足夠的時間開始朝着正確的方向前進。我認爲你需要更多地閱讀JavaScript和jQuery - 閱讀一些教程，練習練習。 – Kon

這是因爲您使用toggle，這與備用點擊調用隱藏和顯示部件。你的代碼工作正常，並按預期。

我的意思是，如果內容重新加載到圓1已經隱藏，並且如果第二次單擊它，則嘗試再次隱藏相應的內容。它什麼都不做。

來源

2011-07-23 11:47:03

動畫多個div擴大崩潰問題

回答

相關問題