Slide Div In同时

Question

我想创建一个效果，当点击一个链接时，页面上的div向左滑动，链接的div从左侧滑入，如：http://templates.entheosweb.com/template_number/live_demo.asp?TemplateID=38272

任何人都可以帮助我吗？

Answer 1

正如@SeaMirra所说，尝试使用.animate（）的回调函数。 检查此琴：http://jsfiddle.net/ykbgT/5677/

$('.button a').click(function(e) { 
    e.preventDefault(); 
    var tg = $(this).attr('href'); 
    tg = tg.substr(1, tg.length); /* Get the target ID */ 
    $('.current').animate({'left' : '-50%'}, 500, function(){ 
     $('.current').removeClass('current'); 
     $('#' + tg).addClass('current').animate({'left' : '50%'}, 500); 
    }); 
}); 

Answer 2

jquery的动画函数应该做你所需要的。您可以使用它将css“左”属性从负（隐藏）值设置为正（可见）值。

http://jsfiddle.net/xPEP2/

$('something').click(function() { 
    $('div').animate({ 
    left: 0, 
    }, 1000, function() { 
    // Animation complete. 
    }); 
}); 

祝您好运！

Answer 3

，如果你改变你的HTML以下（移动类锚，并给予他们实际的href - 可访问性帮助，并会跳转用户无需JS正确的区域）：

<div><a href="#box1" class="button">Click Box #1</a> </div> 
<div><a href="#box2" class="button">Click Box #2</a> </div> 
<div><a href="#box3" class="button">Click Box #3</a> </div> 
<div><a href="#box4" class="button">Click Box #4</a> </div> 

<div id="container"> 
    <div id="box1" class="box">Box #1</div> 
    <div id="box2" class="box">Box #2</div> 
    <div id="box3" class="box">Box #3</div> 
    <div id="box4" class="box">Box #4</div> 
</div> 

您可以使用下面的JS：

var boxes = $('.box'), 
    currentBox = 1; 

$('.button').click(function(e) { 
    e.preventDefault(); 
    var box = $($(this).attr('href')); 
    if (box.css("left") == "150%") { 
     $('#box' + currentBox).stop().animate({left: '150%',}, 500); 
     box.stop().animate({left: '50%',}, 500); 
     currentBox = boxes.index(box) + 1; 
    } 
}); 

http://jsfiddle.net/ykbgT/5678/

或使用类：

http://jsfiddle.net/ykbgT/5681/