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

如果你将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/

Answer 3

Jquery的动画功能应该做你需要的。您可以使用它将css“left”属性从负（隐藏）值设置为正（可见）值。

http://jsfiddle.net/xPEP2/

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

祝你好运！

同时滑入和滑出Div

3 个答案: