jQuery Слайд-в соответствующее содержимое при нажатии кнопки

Question

У меня есть несколько блоков контента, которые я хочу вставлять справа от экрана, когда нажата соответствующая кнопка содержимого. Эффект, который я пытаюсь достичь, похож на http://jsfiddle.net/jtbowden/ykbgT/2/ (получил его из другого сообщения), за исключением того, что я хочу сделать это при нажатии кнопки.

http://jsfiddle.net/ykbgT/8571/

HTML:

<div class="links"> 
    <a href="#" class="div1">Div 1</a> 
    <a href="#" class="div2">Div 2</a> 
    <a href="#" class="div3">Div 3</a> 
    <a href="#" class="div4">Div 4</a> 
    <a href="#" class="div5">Div 5</a> 
</div> 
<div id="container"> 

    <div id="box1" class="box">Div #1</div> 
    <div id="box2" class="box">Div #2</div> 
    <div id="box3" class="box">Div #3</div> 
    <div id="box4" class="box">Div #4</div> 
    <div id="box5" class="box">Div #5</div> 

</div> 

JQuery: (это для нажатия на поле)

$('.box').click(function() { 

    $(this).animate({ 
     left: '-50%' 
    }, 500, function() { 
     $(this).css('left', '150%'); 
     $(this).appendTo('#container'); 
    }); 

    $(this).next().animate({ 
     left: '50%' 
    }, 500); 
}); 

Answer 1

Надежда это то, что вы хотите - http://jsfiddle.net/ykbgT/8574/

<div class="links"> 
    <a href="#" id="div1">Div 1</a> 
    <a href="#" id="div2">Div 2</a> 
    <a href="#" id="div3">Div 3</a> 
    <a href="#" id="div4">Div 4</a> 
    <a href="#" id="div5">Div 5</a> 
</div> 
<div id="container"> 

    <div id="box1" class="box">Div #1</div> 
    <div id="box2" class="box">Div #2</div> 
    <div id="box3" class="box">Div #3</div> 
    <div id="box4" class="box">Div #4</div> 
    <div id="box5" class="box">Div #5</div> 

</div> 

Jquery:

$('.links a').click(function() { 

    var linksId1 =  $(this).attr('id').split('div');  
    var container = 'box' + linksId1[1];  
    var Containers=$('div#container > div[id!="'+container+'"]'); 

    Containers.animate({ 
     left: '-50%' 
    }, 500, function() { 
     Containers.css('left', '150%'); 
     Containers.appendTo('#container'); 
    }); 

    $('#'+container).animate({ 
     left: '50%' 
    }, 500); 
}); 

Answer 2

В одной кнопки:

$('.btn').click(function() { 

    var $current = $('.box').first(); 

    if($current.not(':animated')){ 
     //////////////////////////// Original code starts 
     $current.animate({ 
      left: '-50%' 
     }, 500, function() { 
      $current.css('left', '150%'); 
      $current.appendTo('#container'); 
     }); 

     $current.next().animate({ 
      left: '50%' 
     }, 500); 
     //////////////////////////// Original code ends 
    } 

}); 

JSFiddle example here.

Answer 3

В соответствии с вашим кодом на див1 нажмите будет показывать окно 1 посмотреть

Пример: http://jsfiddle.net/kevalbhatt18/1xugjfvd/

Я создал событие на ссылки класса и от ссылки я получаю поле идентификатора так одна функции делает все действия

 

$('.links').click(function(e) {  
var temp = e.target.classList[0].replace("div", "box"); 
    $('.box').animate({ 
     left: '-50%' 
    }, 1, function() { 
     $('.box').css('left', '50%'); 
     $('.box').appendTo('#container'); 
    }); 

$('#'+temp).siblings().animate({ 
     left: '150%' 
    }, 500); 

});