jQuery水平滑动效果答案

【问题标题】：JQuery horizontal slide effectjQuery水平滑动效果
【发布时间】：2015-03-20 00:17:22
【问题描述】：

我正在努力完成这项工作：当用户单击其中一个框时，应该会发生以下情况：框改变颜色，向左滑动并且该主题的文本变得可见（如这些图像中的说明）

任何人都可以为我指出正确的方向或解决方案吗？

非常感谢您的帮助！

我想出了这个：

    <!DOCTYPE html>
    <html lang="en-US">
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
            <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
            <script src="js/jquery.zaccordion.js"></script>
            <style type="text/css">
                /* Just some styles to set the page layout. */
                * {margin:0;padding:0;font-family:Arial, Verdana, sans-serif;}
                body {padding:20px;line-height:20px;font-size:12px;color:#000;}
                h1 {font-size:18px;margin:10px 0;line-height:1;}
                h2 {font-size:14px;margin:10px 0;line-height:1;}
                p {font-size:12px;margin:10px 0;}
                small {font-size:11px;margin:10px 0;color:#333;}
                a {font-size:12px;text-decoration:none;color:#f00;}
                p span {color:#00f;}
                #container {width:960px;margin:0 auto;padding-bottom:40px;}
                #examples {margin-top:60px;}
                pre {font-family:"Courier New", Courier, monospace;font-size:11px;margin:20px 0 100px 0;border:1px dashed #ddd;padding:10px;background:#f6f6f6;}
                pre.html {margin:10px 0;}
                .clear {clear:both;}
            </style>
            <script type="text/javascript">
                $(document).ready(function() {
                    $("pre.js").each(function(index) {
                        eval($(this).text());
                    });
                });
            </script>
        </head>
        <body>
            <div id="container">
                <div id="examples">
                <style type="text/css">
                #example10 li {position:relative;}
                #example10 {border: 1px solid black;}
                #example10 div.slider-info {top:0px;height:150px;left:0;position:absolute;width:846;}
                #example10 div.slider-info h1 {font-size:61pt;background-color: white; color:black;border-right: 1px solid black;border-left: 1px solid black;width:115px;height:150px;padding-top: 35px;padding-left: 35px;margin-top: 0;float: left;}
                #example10 div.slider-info p {display:none;float: left;padding-top: 50px;font-size:12px;line-height:14px;color:black;z-index: -1; margin:0 !important;}
                #example10 li.slider-open div.slider-info p {display:inline;}
                #example10 div.slider-info p.slider-text{font-size: 20px;color:black;}
            </style>
            <ul id="example10">
                <li>
                    <div class="slider-info">
                        <h1 class="peerst">W</h1>
                        <p class="slider-text">1111111111111111111111111111111111111111111.</p>
                    </div>
                </li>
                <li>
                    <div class="slider-info">
                        <h1 class="peerst">W</h1>
                        <p class="slider-text">222222222222222222222222222222222222222222222.</p>
                    </div>
                </li>
                <li>
                    <div class="slider-info">
                        <h1 class="peerst">W</h1>
                        <p class="slider-text">333333333333333333333333333333333333333333333.</p>
                    </div>
                </li>
                <li>
                    <div class="slider-info">
                        <h1 class="peerst">W</h1>
                        <p class="slider-text">44444444444444444444444444444444444444444.</p>
                    </div>
                </li>
            </ul>
<pre class="js">
$(document).ready(function() {
    $("#example10").zAccordion({
        auto: false,
        width: 1300,
        speed: 2000,
        slideClass: "slider",
        slideWidth: 846,
        height: 150
    });
});
    </pre>


        </body>
    </html>

实际上仅出于某种原因才有效，文本（类：滑块文本）根本没有显示，我尝试了多种方法，但无法将其显示到手风琴中。有什么解决办法吗？

【问题讨论】：

看看here
显示您尝试过的内容。
我在上面编辑并添加了我的代码

标签： javascript jquery css slider

【解决方案1】：

你正在制作的东西看起来像是一个风格很重/定制的accordion。

您还没有发布您当前实现的任何细节，因此很难就后续步骤提供建议，但是如何将实现基于 jQuery 手风琴并对其进行样式设置以匹配您的模型？

以下是一些相关问题：

在 OP 发布代码尝试后编辑：

看起来您从this page 中获取了一个示例，由于您有特定的样式要求，因此无法立即使用。

首先，将auto: false 属性添加到手风琴Javascript 以阻止其自动播放幻灯片，从而导致DOM 发生变化，从而无法调试。使用 Chrome 或 Firefox 开发者工具（按 F12）并检查未显示的元素。你会发现位置是错误的——位置太低了。您可以使用诸如top: -125px 和left: 200px 之类的CSS（取决于您想要的确切位置）来使文本向上移动一点并显示。如果您调试该示例，您将看到 CSS display: none 阻止显示“关闭”项目的文本。

接下来，请在JSFiddle 上放置一个工作示例并链接到它。在侧边栏中添加jQuery等外部资源，并使用RawGit链接zAccordion等github上的文件。这使人们更容易查看和调试。我必须获取您的 HTML，将其保存在本地，找到 zAccordion，将其导入并使其工作，然后才能开始查看您的尝试。

希望对您有所帮助。调试会让你走得更远——检查在某些操作之后应用了哪些 CSS 规则，例如打开或关闭项目。当它变得更复杂时，将 JavaScript 代码移动到单独的 JS 文件中，以便您可以对其进行调试。

【讨论】：

是的，上次我发布“你需要手风琴”的答案是，“不，你用实际代码回答”...
您的回答将我引向上述当前解决方案，但只有一个问题！
感谢您的详细回答以及查看我的代码的时间。下次我会记住 jsfiddle 的提示！现在，我设法通过简单的 float:left 和 z-index 让这个东西正常工作！您的回答让我找到了这个解决方案，非常感谢您！
不客气。你用的是哪个版本的IE？我快速搜索了一下，旧版本的 IE 似乎无法使用某些控件，例如 jQuery 手风琴。在IE中打开控制台是否有错误？