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

根据您在div1上的代码，单击它将显示框1，请参阅此

示例：http://jsfiddle.net/kevalbhatt18/1xugjfvd/

我在链接上创建了一个活动，并且从链接中我获得了框 ID，因此一个功能会使所有操作

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

});