0

这是我的第一个 jquery 脚本：

<!DOCTYPE html>
<html>
    <head>
        <title>Sliding test</title>
        <style>

                    html {
                height: 100%;
                padding: 0;
                margin: 0;
            }

            body{
                text-align: center;
                background: url('bg.png');
                height: 100%;
                margin: 0;
                padding: 0;
                box-shadow: 0 0 900px 35px rgba(0, 0, 0, 0.5) inset;
            }

            #global_wrap {
                width: 1000px;
                margin: 30px auto 0;
            }

            .container {
                /*background: pink;*/
                height: 240px;
                width:  290px;
                overflow: hidden;
                border-radius: 5px 5px 5px 5px;
                border: 3px solid #EAEAEA;
                display: inline-block;

            }

            .slide_wrapper {
                height: 500px;
                width:290px;
                margin-left: 0px;
                padding-left: 0px;
                text-align: left;
                background: white;
                margin-top: 0;
            }



            li {
                color: grey;
                list-style: none outside none;
            }

            a {
                color: inherit;
                text-decoration: none;
            }

            img {
                display: block;
            }


            h3 {
                background: none repeat scroll 0 0 #252525;
                color: white;
                font-family: sans-serif;
                margin: 0;
                padding-bottom: 12px;
                padding-top: 12px;
                text-align: center;
                width: 290px;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
&nbsp;
        <div id="global_wrap">
            <div class="container">
                <div class="slide_wrapper">
                    <a href="javascript:;">
                        <img src="visuel1.jpg" width="290" height="193">
                        <h3>Category 1</h3>
                    </a>
                    <ul>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>

                </div>
            </div>



            <div class="container">
                <div class="slide_wrapper">
                    <a href="javascript:;" >
                        <img src="visuel2.png" width="290" height="193">
                        <h3>Category 2</h3>
                    </a>
                    <ul>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>

                </div>
            </div>



            <div class="container">
                <div class="slide_wrapper">
                    <a href="javascript:;">
                        <img src="visuel3.jpg" width="290" height="193">
                        <h3>Category 3</h3>
                    </a>
                    <ul>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>

                </div>
            </div>

        </div>


        <script>   
        //wrapper_click=false;


        $(".slide_wrapper a").click(function(){

                if($(this).hasClass('open'))
                {
                   // wrapper_click = false;
                    $(this).parent().animate({'margin-top': '0px'}, 'slow');
                    $(this).removeClass('open');
                }
                else
                {
                    //wrapper_click = true;
                    $(this).parent().animate({'margin-top': '-193px'}, 'slow');
                    $(this).addClass('open');
                }
            });

        </script>
    </body>
</html>

我不知道为什么，但它在 jsfiddle 上运行良好：http: //jsfiddle.net/svmK5/

它在所有浏览器上都可以正常工作，除了 chrome，我不明白为什么......我认为我的代码中出现了一些错误，这使得它变得滞后

有人知道脚本中有什么问题吗？

4

3 回答 3

2

我发现是什么让脚本变得迟钝，这是由于这个 CSS 属性：

html {
  height: 100%;
}

我不知道为什么这使我的脚本变得迟钝，但是当我删除它时，我的脚本运行良好

谢谢大家的帮助，特别是 joel harkes 非常有用的帮助！

于 2013-05-02T08:35:18.700 回答
1

它在这里的 chrome 中运行良好，您可以选择使用切换类来减少编码：

// toggleClass( class, [duration] )

$(".slide_wrapper a").click(function () {
    $(this).parent().toggleClass('open','slow');
});

CSS：

.open { 
 'margin-top': '-193px'
}

甚至里面的所有链接都slide_wrapper将执行点击，我建议：

<a class="toggler" href="javascript:;">
$(".toggler").click...

这个小提琴可能会有所帮助：http: //jsfiddle.net/svmK5/8/

修复我使用的布局错误：

.slide_wrapper {
   float: left 
}
于 2013-04-26T08:24:57.737 回答
0

这在 Chrome 26.0.1410 中运行良好

img{ image-rendering: -webkit-optimize-contrast; }
于 2013-05-02T13:21:39.397 回答