使用JQuery水平滑动div
所以我对Javascript和Jquery很新。 我想要创建的是一个双列页面，左栏中的链接将导致右侧的div从左向右水平滑动，再次单击时滑出视图。 我知道我需要使用幻灯片切换效果，但我无法以每个链接导致不同的div滑动的方式实现它…我试图调整我通过谷歌搜索找到的几个jsfiddles但是谈到javascript，我很丢失。
到目前为止，这是我能够成功调整的唯一小提琴…… http://jsfiddle.net/bridget_kilgallon/HAQyK/
但那些垂直滑动，并在点击时加载所有div。
这是我为没有任何javascript的页面布局创建的小提琴…… http://jsfiddle.net/bridget_kilgallon/NhanG/
请帮忙！ 🙂 -Bridget
不幸的是，jQuery没有现成的’水平’幻灯片动画。 除非你使用更大的软件包，比如jQuery UI。 但我不认为这是必要的。
你唯一想要的是在jQuery中创造性地使用animate()函数来实现效果。
我不知道你想要使用哪一个，因为描述含糊不清所以我在面板切换中做了两个小效果示例：
http://jsfiddle.net/sg3s/rs2QK/ – 这个滑动面板从左侧打开并靠近右侧
http://jsfiddle.net/sg3s/RZpbK/ – 面板从左向右滑动，靠近左侧，打开新面板。
资源：
你不能用纯CSS做到这一点，不管怎样。 对转换的支持是基本的，仅限于基于webkit的浏览器。 所以，既然你需要jQuery聪明地使用它，但你仍然需要确保在使用JS之前使用css尽可能多地设计样式。 请注意，我在JS中没有使用任何视觉样式/操作。
不使用JavaScript，您只能使用CSS转换（如果可用）。 虽然这些都非常令人印象深刻，但就目前为止我们发现，对于条件动画来说，它们并不是特别棒。 它们基本上可以从起点到另一个点然后返回（基于浏览器本身可用的本机浏览器事件），使用JS可以添加/删除其他类并让div元素移动到您心中的内容，但是不是’只是’CSS（虽然我喜欢被certificate是错误的）。
到目前为止，我能够想出的最好的是：
#left { float:left; width:200px; } .right { height: 0; background-color: #fff; margin-left: 205px; overflow: hidden; -webkit-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; -moz-transition: all 1s linear; transition: all 1s linear; } .right:target { display: block; height: 5em; background-color: #ffa; -webkit-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; -moz-transition: all 1s linear; transition: all 1s linear; }
JS小提琴演示 。
并且这不会从侧面滑动（尽管你可以这样做），因为它看起来不太好，因为元素的宽度发生了变化时发生的内容重新回流。
编辑因为我认为我可能误解了原问题的一部分：
…我想没有任何JavaScript
既然如此，评论（下面）似乎表明jQuery是一个不错的选择，这可能是值得作为一个演示：
$('#left a').click( function(){ var div = $('div').not('#left').eq($(this).index('#left a')); var others = $('div[data-visible="true"]'); others.each( function(){ $(this).animate({ 'left' : '2000px' },1000,function(){ $(this).removeAttr('style data-visible'); }); }); if (div.attr('data-visible')) { div.animate({ 'left' : '2000px' },1000,function(){ $(this).removeAttr('style data-visible'); }); } else { div.animate({ 'left' : '210px' },1000).attr('data-visible',true); } });
JS小提琴演示 。
参考文献：
-
animate()。 -
attr()。 -
[attribute="value"]选择器 。 -
click()。 -
each()。 -
eq()。 -
index()。 -
not()。 -
removeAttr()。
您可以使用jQuery UI中的effects模块并使用show('slide') 。 看看http://jsfiddle.net/HAQyK/1/
这是您想要的代码。 事实certificate它适用于IE，Safari，Chrome，Firefox等。
这是HTML部分。
这是JavaScript函数中的jQuery部分。
function scrollThumb(direction) { if (direction=='Go_L') { $('#slide-wrap').animate({ scrollLeft: "-=" + 250 + "px" }, function(){ // createCookie('scrollPos', $('#slide-wrap').scrollLeft()); }); }else if (direction=='Go_R') { $('#slide-wrap').animate({ scrollLeft: "+=" + 250 + "px" }, function(){ // createCookie('scrollPos', $('#slide-wrap').scrollLeft()); }); } }
隐藏箭头请看这里。 使用jQuery检测水平滚动div的结束
$(function () { $("#wizardV").steps({ headerTag: "h2", bodyTag: "section", transitionEffect: "slideLeft", stepsOrientation: "vertical" }); });
* //向导是包含所有内容的div