jQuery jquery淡出向左滑动

jquery fade out sliding left

提问by Junsung Park

I want to make some divs fade out and sliding left at the same time, which is much like dismissing notification cards on Android.

我想让一些 div 淡出并同时向左滑动，这很像在 Android 上关闭通知卡。

I searched and found some jquery codes.

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

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

but this code makes the div(#book) fade out with sliding up, not left (or right). I read the document about .animate() but I couldn't find how to do that.

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

采纳答案by Manoj Kumar

check if this helps you

检查这是否对您有帮助

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

回答by Jai

You can try this :

你可以试试这个：

$('#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>

---

---

Note:

笔记：

The target element which should be animated has to be positioned relatively/absolutely.

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

回答by djluko

If all you want is a fade out & slide left at the same time, you'll need to remove the margin, padding & height options as they will cause the animation to slide up andleft. You also need to apply the right option to have it slide out of the way:

如果您想要的只是同时淡出和向左滑动，则需要删除边距、填充和高度选项，因为它们会导致动画向上和向左滑动。您还需要应用正确的选项才能让它滑开：

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

I think you also need to apply the position:relative property to the #book element, and encase it in a parent element which has the position:relative property for this to work.

我认为您还需要将 position:relative 属性应用到 #book 元素，并将其封装在具有 position:relative 属性的父元素中才能使其工作。

Working fiddle: http://jsfiddle.net/ch3uexcn/

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

回答by artm

See http://jsfiddle.net/wnu734dz/

见http://jsfiddle.net/wnu734dz/

Width for slide left, opacity for fadeOut:

向左滑动的宽度，淡出的不透明度：

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

回答by Lund

Try to animate the width with

尝试为宽度设置动画

.animate({width: 'toggle'})