1

我正在尝试创建一种效果，当单击链接时，页面上的 div 向左滑出，链接的 div 从左侧滑入，就像：http ://templates.entheosweb.com/template_number/live_demo .asp?TemplateID=38272

谁能帮我解决这个问题？

4

3 回答 3

3

正如@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);
     });
});
于 2013-05-15T15:30:27.717 回答
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/

于 2013-05-15T15:32:37.757 回答
1

Jquery 的动画功能应该可以满足您的需求。您可以使用它来将 css“左”属性从负（隐藏）值设置为正（可见）值。

http://jsfiddle.net/xPEP2/

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

祝你好运！

于 2013-05-15T15:24:47.343 回答