jQuery淡出左滑动效果

Question

我希望能让一些div同时淡出并向左滑动，就像在Android上取消通知卡片一样。

我搜索并找到了一些jquery代码。

$('#clickme').click(function(){   
$('#book').animate({
      opacity: 'hide', // animate slideUp
      margin: 'hide',
      padding: 'hide',
      height: 'hide' // animate fadeOut
    }, 'slow', 'linear', function() {
      $(this).remove();
    });
});

但是这段代码使得div(#book)向上滑动淡出，而不是向左（或右）滑动。 我阅读了关于.animate()的文档，但是我找不到如何做到这一点。

- Junsung Park

Answer 1

你可以尝试这个：

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0, // animate slideUp
    marginLeft: '-200px'
  }, 'slow', 'linear', function() {
    $(this).remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='clickme'>Click me!!!</button>
<div id='book' style='width:200px; height:200px; background:black; border:greenyellow 4px solid;position:absolute; top:40px;'>Book</div>

注意：

需要进行动画的目标元素必须定位为相对定位/绝对定位。

- Jai

Answer 2

请检查是否对您有所帮助。

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").hide("slide", { direction: "left" }, 1000);
    });
});

#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 50px;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<div id="flip">Click to slide left panel</div>
<div id="panel">Hello world!</div>

- Manoj Dhiman

Answer 3

如果您只想要一个同时淡出和向左滑动的效果，您需要删除边距、填充和高度选项，因为它们会导致动画向上和向左滑动。您还需要应用正确的选项来让它滑出视线。

$('#clickme').click(function(){   
$('#book').animate({
      opacity: 'hide', // animate slideUp
      right: '200px',  // slide left
    }, 'slow', 'linear', function() {
      $(this).remove();
    });
});

我认为您还需要为 #book 元素应用 position:relative 属性，并将其包裹在一个具有 position:relative 属性的父元素中，这样才能使其正常工作。

可以参考以下示例链接：http://jsfiddle.net/ch3uexcn/

- djluko

Answer 4

查看 http://jsfiddle.net/wnu734dz/

幻灯片向左滑动的宽度，淡出的透明度:

$('#book').animate({
      opacity: 'hide', // animate fadeOut
      width: 'hide'  // animate slideLeft
    }, 'slow', 'linear', function() {
      $(this).remove();
    });

- artm

Answer 5

尝试使用动画效果来改变宽度。

.animate({width: 'toggle'})

- Lund