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（）的文档，但我找不到如何做到这一点。

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>

注意：

应该设置动画的目标元素必须定位relatively/absolutely。

Answer 2

检查这是否对您有所帮助

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

如果你想要的只是一个淡出＆amp;同时向左滑动，你需要删除边距，填充和放大高度选项，因为它们会导致动画向上滑动和。您还需要应用正确的选项让它滑开：

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

我认为您还需要将position：relative属性应用于#book元素，并将其包含在父元素中，该元素具有position：relative属性，以便工作。

工作小提琴：http://jsfiddle.net/ch3uexcn/

Answer 4

请参阅http://jsfiddle.net/wnu734dz/

左侧滑动宽度，fadeOut不透明度：

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

Answer 5

尝试使用

为宽度设置动画

.animate({width: 'toggle'})

jquery淡出左侧滑动

5 个答案:

注意：