單擊按鈕時，從左側和右側同時滑動元素？

Question

我試圖讓兩個元素在單擊時滑動。我希望第一個元素（一個img）從左側滑入，另一個元素（一個p標籤）從點擊一個按鈕（li）的右側滑入。然後，當點擊另一個按鈕時，我希望前兩個元素消失，並且接下來的兩個元素（對應於單擊的按鈕）滑入。

是否有方法循環這些以便它們總是滑動

$（ '＃NAV-按鈕-1'）上單擊（函數（）{

$('#people-2').hide(); 
    $('#people-3').hide(); 
    $('#people-1').show(); 

$('.slideleft').animate({ 
    marginLeft: '103px' 
    }, 1000, function() { 
    // Animation complete. 
}); 
$('#slideright').animate({ 
    marginRight: '12px' 
    }, 1000, function() { 
    // Animation complete. 
}); 

}）。。

Answer 1

這是一個入門示例。

我做了一個功能，你原有的JS

function doAnimation(id) { 
    $(id).children('.slideleft').fadeIn(function() { 
     $(this).animate({ 
      marginLeft: '103px' 
     }, 1000, function() { 
      // Animation complete. 
     }); 
    }); 
    $(id).children('.slideright').fadeIn(function() { 
     $(this).animate({ 
      marginRight: '12px' 
     }, 1000, function() { 
      // Animation complete. 
     }); 
    }); 
} 

的下面是一個被稱爲按鈕按下方法。它包含包含動畫項目的包裝的ID，並最終調用上述方法。

function animatePeople(id) { 
    // If there are visible people 
    if ($('.people:visible').length > 0) { 
     // Fade out the visible people and then process the following callback function 
     $('.people:visible').fadeOut(function() { 
      // Reset the margins 
      $('.people').css({ 
       'margin-left': '', 
       'margin-right': '' 
      }); 
      // Do the new animation 
      doAnimation(id); 
     }); 
    } else { 
     // Do the new animation 
     doAnimation(id); 
    } 
} 

最後，這些是按鈕的處理程序。

$('#nav-button-1').click(function() { 
    animatePeople('#people-holder-1'); 
}); 
$('#nav-button-2').click(function() { 
    animatePeople('#people-holder-2'); 
}); 

jsfiddle