jQuery水平滑动效果

Question

我正在尝试完成此操作：当用户单击其中一个框时，将发生以下情况：框更改颜色，向左滑动，并且该主题的文本变为可见（如在用于说明的这些图像中）在此处输入图片说明

在此处输入图片说明

谁能为我指出正确的方向或解决方案？

帮助将不胜感激！

我想出了这个：

    <!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>

它实际上仅由于某种原因才起作用，而文本（类：slider-text）根本无法显示，我已经尝试了多种方法，但无法将其显示在手风琴中。 有什么办法吗？

Answer 1

您正在制作的东西看起来像是风格/定制的手风琴。

您尚未发布当前实现的任何详细信息，因此很难建议下一步，但是如何将实现基于jQuery手风琴并将其样式设置为与您的模型匹配呢？

以下是一些相关的问题：

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

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

首先，向手风琴Javascript添加属性auto: false ，以阻止它自动播放幻灯片，从而导致DOM更改，从而无法调试。 使用Chrome或Firefox开发人员工具（按F12键）并检查未显示的元素。 您会发现位置错误-位置太低了。 您可以使用CSS（例如top: -125px和left: 200px （取决于您想要的确切位置）来使文本向上移动并显示。 如果您调试该示例，则会看到CSS display: none阻止display: none “ closed”项的文本。

展望未来，请在JSFiddle上放置一个工作示例并链接到它。 在边栏中添加外部资源（例如jQuery），并使用RawGit链接到github上的文件（例如zAccordion）。 这使人们更容易查看和调试。 在开始考虑您的尝试之前，我不得不拿起您的HTML，将其保存在本地，找到zAccordion，将其导入并使其工作。

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

jQuery水平滑动效果

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-01-21 13:16:17

jQuery水平滑动效果

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-01-21 13:16:17

解决方案1
1 已采纳 2015-01-21 13:16:17