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

Question

我有多个内容块，当单击内容的相应按钮时，我想从屏幕右侧滑入这些内容块。我试图实现的效果类似于 http://jsfiddle.net/jtbowden/ykbgT/2/（从不同的 post 获得），只是我想在单击按钮时执行此操作。

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/

我在 link class 上创建了事件，从 link 我得到了 box id 所以一个函数使所有 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);

});

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

jQuery Slide-in respective content on button click

jquery

slide