Question

我发现这个JSFiddle具有类似的效果我正在寻找

但是，当隐藏的div出现时，我需要添加淡入效果，并且当这个div返回隐藏时。

我尝试添加Animate CSS的效果，但它没有效果

$('#yourElement').addClass('animated bounceOutLeft');

Answer 1

这是你在找什么？我们不是左右移动内部div，而是将home和member-home div保持在同一位置，使用css隐藏一个。

#member-home {
    display:none;
    position:absolute;
    left:0px;
    width: 400px;
    height: 600px;
    background-color: green;
}

然后在按钮上单击我们只使用动画持续时间为2000的fadeToggle（）淡入第一个显示div并淡出隐藏的div，反之亦然。不需要if-else条件的单独功能。

$("button").bind("click", function() {
    $("#home").fadeToggle(2000);
    $("#member-home").fadeToggle(2000);
});

以下是示例代码。

http://codepen.io/Nasir_T/pen/vXPjqy

希望这有帮助。

Answer 2

更新功能如下。

function toggleDivs() {
    var $inner = $("#inner");

    // See which <divs> should be animated in/out.
    if ($inner.position().left == 0) {
        $inner.animate({
            opacity: 1,left: "-400px"
        },2000);
    }
    else {
        $inner.animate({
             opacity: 1,left: "0px"
        },2000);
    }


}

Answer 3

试试这个：http://jsfiddle.net/1cgs9evo/1/

function toggleDivs() {
  var $inner = $("#inner");

  if ($inner.position().left == 0) {
    $inner.fadeOut('slow');
    $inner.animate({
        left: "-400px"
    });
    $inner.fadeIn('slow');
  } else {
    $inner.fadeOut('slow');
    $inner.animate({
        left: "0px"
    });
    $inner.fadeIn('slow');
  }
}

使用jQuery在两个div之间滑动效果？

3 个答案: