jQuery SlideOut 函数从右到左
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15002179/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery SlideOut Function from Right to Left
提问by user1835490
I am trying to slideout function from rightside in jQuery, by changing the code for "From Left to Right" but it's not functioning correctly... Can u please give me the right direction to modify...
我试图通过更改“从左到右”的代码在 jQuery 中从右侧滑出功能，但它无法正常运行......你能给我正确的方向来修改......
Presently I am using this code...
目前我正在使用此代码...
$(function() {
$('#nav').stop().animate({'marginRight':'-100px'},1000);
function toggleDivs() {
var $inner = $("#nav");
if ($inner.position().right == "-100px") {
$inner.animate({right: 0});
$(".nav-btn").html('<img src="images/slide-out.png" alt="open" />')
}
else {
$inner.animate({right: "100px"});
$(".nav-btn").html('<img src="images/slide-out.png" alt="close" />')
}
}
$(".nav-btn").bind("click", function(){
toggleDivs();
});
});
回答by Kumar
just see this link it will be useful http://www.learningjquery.com/2009/02/slide-elements-in-different-directions
只要看到这个链接它会很有用http://www.learningjquery.com/2009/02/slide-elements-in-different-directions
or use this
或使用这个
$("div").click(function () {
$(this).show("slide", { direction: "left" }, 1000);
});
Reference: http://docs.jquery.com/UI/Effects/Slide
回答by Anujith
Try this : http://jsfiddle.net/egUHv/5/
试试这个：http: //jsfiddle.net/egUHv/5/
$(function() {
$('#nav').stop().animate({'margin-right':'-100px'},1000);
function toggleDivs() {
var $inner = $("#nav");
if ($inner.css("margin-right") == "-100px") {
$inner.animate({'margin-right': '0'});
$(".nav-btn").html('<img src="images/slide-out.png" alt="open" />')
}
else {
$inner.animate({'margin-right': "-100px"});
$(".nav-btn").html('<img src="images/slide-out.png" alt="close" />')
}
}
$(".nav-btn").bind("click", function(){
toggleDivs();
});
});
回答by Martin
A very simple solution:
一个非常简单的解决方案：
$(function() {
$('#div').ToggleSlide();
});
$.fn.ToggleSlide = function() {
return this.each(function() {
$(this).css('position', 'absolute');
if(parseInt($(this).css('right')) < 0) {
$(this).animate({ 'right' : '-100px' }, 1000, function() {
$(this).css('position', 'relative');
});
}
else {
$(this).animate({ 'right' : '0px' }, 1000, function() {
$(this).css('position', 'relative');
});
}
});
});
What we do here: On function call we set the item's position to 'absolute' so we can animate it easy. We check if the item has negative 'right' (is already moved to the right), if true we animate back to 0 (right-to-left motion), else we animate to '-right' (left-to-right motion). Once the animation is completed, we set the item's position to 'relative' so we can use it's dimensions.
我们在这里做什么：在函数调用时，我们将项目的位置设置为“绝对”，这样我们就可以轻松地为其设置动画。我们检查项目是否有负的“右”（已经向右移动），如果为真，我们动画回到 0（从右到左的运动），否则我们动画到“-右”（从左到右的运动） ）。动画完成后，我们将项目的位置设置为“相对”，以便我们可以使用它的尺寸。
回答by augusto
We have now the animate.css
我们现在有了animate.css
animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
animate.css 是一堆很酷、有趣且跨浏览器的动画，供您在项目中使用。非常适合强调、主页、滑块和一般的加水功能。
You can call animate effects from jquery. Clean and effective
您可以从 jquery 调用动画效果。干净有效
