jQuery滑入按钮单击相应的内容

Question

I have multiple content blocks that I want to slide-in from the right of the screen when the content's respective button is clicked. The effect I am trying to achieve is similar to http://jsfiddle.net/jtbowden/ykbgT/2/ (got it from a different post), except I want to do it on button clicks.

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: (this is for clicking on the box)

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

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

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

Answer 1

Hope this is what you want - 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

As a single button:

$('.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

As per your code on div1 click it will show box 1 see this

Example : http://jsfiddle.net/kevalbhatt18/1xugjfvd/

I created event on link class and from link i am getting box id so one function makes all action

$('.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);

});