Question

我试图让div从左侧滑动，看起来像是滑出来。

目前我已经从左上角扩展了它，但它不是我所追求的。

在这里小提琴：http://jsfiddle.net/zangief007/yhdrfo4e/

HTML：

<div class="first"></div>
<div class="second"></div>

JS：

$( ".first" ).click(function() {
  $( ".second" ).show( "slow" );
    $( ".first" ).hide( 100 );
});

$( ".second" ).click(function() {
  $( ".second" ).hide( "slow" );
    $( ".first" ).show( 100 );
});

CSS：

.first{
    width:100px;
    height:100px;
    background:red;
    display:block;
}

.second{
    width:400px;
    height:100px;
    background:blue;
    display:none;
}

Answer 1

正如使用animate()的评论所述，可能有助于实现您所寻找的目标。

以下是点击后显示/隐藏div的动画示例：

$( ".first" ).click(function() {
    $(this).animate({width: 0}, {duration: 1000});
    $(this).hide();
    $(".second").show();
    $(".second").animate({width: 400}, {duration: 1000});
});

$( ".second" ).click(function() {
    $(this).animate({width: 0}, {duration: 1000});
    $(this).hide();
    $(".first").show();
    $(".first").animate({width: 100}, {duration: 1000});
});

JS Fiddle Demo

Answer 2

$( ".first" ).click(function() {
  $( ".second" ).show().animate({width: '400px'});
  $( ".first" ).animate({width: 0}).hide();
});

$( ".second" ).click(function() {
  $( ".first" ).show().animate({width: '100px'});
  $( ".second" ).animate({width: 0}).hide();
});

http://jsfiddle.net/yhdrfo4e/7/

看待它的方式略有不同：

$( ".first" ).click(function() {
  $( ".second" ).show().animate({width: '400px'});
  $( ".first" ).animate({width: 0}, function (){$(this).hide()});
});

$( ".second" ).click(function() {
  $( ".first" ).show().animate({width: '100px'});
  $( ".second" ).animate({width: 0}, function (){$(this).hide()});
});

http://jsfiddle.net/yhdrfo4e/9/

Answer 3

编辑：好的，这是一个爆炸：

$( ".first" ).one('click' , function() {
  $( ".second" ).show().animate({width:400}, 800);
  $( ".first" ).animate({width:0,left:400}, 800 ).promise().done(function(){
    $(this).hide( );         
    second();
  });
});

function first() {
    $( ".first" ).one('click' , function() {
      $( ".second" ).show().animate({width:400}, 800);
      $( ".first" ).animate({width:0,left:400}, 800 ).promise().done(function(){
        $(this).hide( );         
        second();
      });
    });
}


function second() {
    $( ".second" ).one('click' , function() {
      $( ".second" ).animate({width:0}, 800 ).promise().done(function(){
        $(this).hide( );
        first();
      });
      $( ".first" ).show( ).animate({width:100,left:0}, 800);
    });
}

CSS

div {
  position:absolute;
}

这样做的目的是使用.one()进行切换，这是一次.on()（click此处）。 http://api.jquery.com/one/

小提琴：http://jsfiddle.net/yhdrfo4e/11/

Answer 4

也许是这样的？

从第二个div开始可见，但在屏幕外（将'左'设置为div的负宽度 - 假设div位于DOM的左边缘。否则，向左设置为[div的负宽度] + [距离到窗口的左边缘））

使用animate()隐藏/移动屏幕外的第一个div。

然后，在第一个动画的回调中（这意味着下一个比特仅在第一个比特结束后发生），将第二个div滑动到'left'= 0px

jsFiddle Demo

<强>的jquery / JS ：

$('.first').animate({
    opacity:0,
    left: '-100px'
},1000,function(){
    $('.second').animate({
        left: '0px'
    },1000);
});

<强>的CSS：

.first{
    width:100px;
    height:100px;
    background:red;
    display:block;
    position:absolute;
}

.second{
    width:400px;
    height:100px;
    background:blue;
    position:absolute;
    left:-400px;
}

在回答您的评论问题时，要使该过程发生，请单击以将click事件捕获到所需元素上。例如，假设您有一个输入类型=按钮：

<input type="button" id="mybutt" value="Go" />

javascript将是：

$('#mybutt').click(function(){
    $('.first').animate({
        opacity:0,
        left: '-100px'
    },1000,function(){
        $('.second').animate({
            left: '0px'
        },1000);
    });
});

从左到右动画div

4 个答案:

JS Fiddle Demo