Question

所以我对Javascript和Jquery很新。我想要创建的是一个双列页面，其中左列的链接将导致右侧的div从左向右水平滑动，并在再次单击时滑出视图。我知道我需要使用幻灯片切换效果，但我无法以每个链接导致不同的div滑动的方式实现它...我试图调整我通过谷歌搜索找到的几个jsfiddles但是谈到javascript，我很丢失。

到目前为止，这是我能够成功调整的唯一小提琴...... http://jsfiddle.net/bridget_kilgallon/HAQyK/
但是那些垂直滑动，并在点击时加载所有div。

这是我为没有任何javascript的页面布局创建的小提琴... http://jsfiddle.net/bridget_kilgallon/NhanG/

请帮忙！ :) -Bridget

Answer 1

不幸的是，jQuery没有现成的'水平'幻灯片动画。除非你使用像jQuery UI这样更大的软件包。但我不认为这是必要的。

你唯一想要的是在jQuery中创造性地使用animate()函数来实现效果。

我不知道你想要哪一个，因为描述含糊不清所以我在面板切换中做了两个小效果的例子：

http://jsfiddle.net/sg3s/rs2QK/ - 这个滑动面板从左侧打开并靠近右侧

http://jsfiddle.net/sg3s/RZpbK/ - 面板从左向右滑动，靠近左侧，打开新面板。

资源：

http://api.jquery.com/animate/

你不能用纯CSS做到这一点，不管怎样。对转换的支持是基本的，仅限于基于webkit的浏览器。所以，既然你需要jQuery聪明地使用它，但你仍然需要确保在使用JS之前使用css尽可能地设置样式。请注意，我在JS中没有使用任何视觉样式/操作。

Answer 2

不使用JavaScript，您只能使用CSS转换（如果可用）。虽然这些都非常令人印象深刻，但就目前为止我们发现，对于条件动画来说，它们并不是特别棒。它们基本上可以从起点到另一个点然后返回（基于浏览器本身可用的本机浏览器事件），使用JS可以添加/删除其他类并让div元素移动到您的心脏的内容，但不是'只是'CSS（虽然我喜欢被证明是错误的。）

到目前为止，我能够提出的最好的是：

#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 Fiddle demo

这不会从侧面滑动（尽管你可以这样做），因为它看起来不太好，因为元素的宽度发生了变化时发生的内容重新回流。

已编辑因为我认为我可能误解了原问题的一部分：

...我想没有任何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 Fiddle demo

参考文献：

Answer 3

您可以使用jQuery UI中的effects模块并使用show('slide')。看http://jsfiddle.net/HAQyK/1/

Answer 4

这是您想要的代码。事实证明它适用于IE，Safari，Chrome，Firefox等。

这是HTML部分。

    <div id="slide-wrap" style="width:1000px; height:200px; overflow:hidden; padding:0 auto;">
        <div id="inner-wrap" style="float:left;">
            <!-- 'Put Inline contains here like below.' -->
            <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
            <!--  ...  -->
            <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
            <!-- 'Put Inline contains here like above.' -->
        </div>
        <div style="display: block; width:40px; height:60px; position: absolute; margin-left:0px;   margin-top:40px">
            <img id='scroll_L_Arrow' src='../assets/img/l-arrow.png' onclick="scrollThumb('Go_L')"/>
        </div>
        <div style="display: block; width:40px; height:60px; position: absolute; margin-left:960px; margin-top:40px">
            <img id='scroll_R_Arrow' src='../assets/img/r-arrow.png' onclick="scrollThumb('Go_R')"/>
        </div>
    </div>

这是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());
            });
        }
       }

隐藏箭头请看这里。 Detect end of horizontal scrolling div with jQuery

Answer 5

$(function () {
$("#wizardV").steps({
    headerTag: "h2",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    stepsOrientation: "vertical"
});
});

* //向导是包含所有内容的div

使用JQuery水平滑动div

5 个答案: