如何使div从右向左滑动
从某人那里得到了一个代码….
我喜欢的是将滑动div从右滑动到左边，我的意思是它将div隐藏到右边并慢慢向左滑动300px宽度。
HTML
quote CSS
#loginPanel { color: #000; cursor:pointer; } #userNav { width: 200px; height: 200px; display: none; background: #ff0000; }
jQuery的
// Open / Close Panel According to Cookie // if ($.cookie('panel') == 'open'){ $('#userNav').slideDown('fast'); } else { $('#userNav').slideUp('fast'); } // Toggle Panel and Set Cookie // $('#loginPanel').click(function(){ $('#userNav').slideToggle('fast', function(){ if ($(this).is(':hidden')) { $.cookie('panel', 'closed'); } else { $.cookie('panel', 'open'); } }); });
请在这个上需要帮助。 只是让div从右向左滑动
这里是小提琴http://jsfiddle.net/7m7uK/195/
您可以使用jQueryUI和其他效果Slide
http://docs.jquery.com/UI/Effects/Slide
例：
$('#userNav').hide("slide", {direction: "left" }, 1000); $('#userNav').show("slide", { direction: "right" }, 1000);
您不能使用.slideToggle（）从左到右滑动，反之亦然，从http://api.jquery.com/slideToggle/ ：
.slideToggle（）方法可以设置匹配元素的高度。 这会导致页面的下半部分向上或向下滑动，从而显示或隐藏项目。 如果最初显示元素，它将被隐藏; 如果隐藏，它将被显示。
您应该尝试更改代码以实现此代码，但我认为如果您尝试使用@ s15199d答案可能会更好，而不是您不需要使用jQueryUI
好吧，我创建了jsfiddle，你必须包含jQueryUI才能工作，你有不同的幻灯片方向组合：
http://jsfiddle.net/7m7uK/197/
好的，用cookies创造了另一个小提琴
不依赖于JQuery-UI
您需要将内容
放在包装器
滑动。 然后，将内容div的右边距设置为负宽度。 包装器
的技巧是将其x-overflow设置为隐藏，以便隐藏内容
。 然后，您可以使用jQuery的native animate()例程将右边距设置为0，以使内容
以水平滑动效果显示。
HTML：
CSS：
#slider-wrapper { overflow-x: hidden; } #slider-content { width: 300px; margin-right: -300px; }
JavaScript的：
$("#slider-button").click(function () { $("#slider-content").animate({ "margin-right": 0 }, "slow"); });
这是一个使用句柄
扩展和折叠div的演示： http ： //jsfiddle.net/gingi/KUCaL/
从左到左，左右滑动的幻灯片
CSS：
/*nav*/ .nav{ position: fixed; right:0; top: 70px; width: 250px; height: calc(100vh - 70px); background-color: #333; transform: translateX(100%); transition: transform 0.3s ease-in-out; } .nav-view{ transform: translateX(0); }
JS：
$(document).ready(function(){ $('a#click-a').click(function(){ $('.nav').toggleClass('nav-view'); }); });
http://www.themeswild.com/read/slide-navigation-left-to-right
$("#DivName").animate({"left": "-=300px", "opacity":1}, "slow");
你试过这个吗？
if ($.cookie('panel') == 'open'){ $('#userNav').slideLeft('fast'); } else { $('#userNav').slideRight('fast'); }