问JQuery silde向后和向后水平移动
EN

Stack Overflow用户

提问于 2013-08-02 15:42:49

回答 1查看 134关注 0票数 0

我想幻灯片w-1，w-2，w-3 div后退和堡垒与左右箭头。我知道也许我可以在这里使用负边距，但我对JQ并不熟悉。我不确定我应该从这样设置的div开始(漂浮在左边)。

html：

    <html>

    <head>

    <link href="css/style.css" rel="stylesheet" type="text/css" media="all">
        <meta charset="utf-8" />
        <title>Demo</title>
    </head>
    <body>
       <div id="container">
            <div id="arrows">
                <ul class="button-group">
                     <li><a href="#" class="button">Left</a></li>
                     <li><a href="#" class="button">Right</a></li>
                </ul>       
            </div> 
            <div id="windows">
                <div id="w-1" class="w">

                </div>
                <div id="w-2" class="w">

                </div> 
                <div id="w-3" class="w">

                </div> 
            </div>      
       </div> 
    </body>
    </html>

css：

  body {
            padding: 20px;
    }
    #container {
            width: 800px;
            height: 500px;
            margin-left: auto;
            margin-right: auto;
            background-color: #EAEAEA;
    }
    #arrows {
            width: 100%;
            height: 100px;
            background-color: #888888;
    }
    #arrows a {
            color: white;
            text-decoration: none;
            font-size: 20px;
            font-weight: bold;
    }
    #windows {
            width: 100%;
            height: 80%;
            background-color: #EAEAEA;
            padding: 50px 0;
            overflow: hidden;
            position: relative;
    }
    .w {
            width: 100%;
            height: 400px;
            margin-bottom: 50px;
    }
    #w-1 {
            background-color: red;
    }
    #w-2 {
            background-color: blue;
    }
    #w-3 {
            background-color: green;
    }

谢谢!

jquery

slide

回答 1

Stack Overflow用户

发布于 2013-08-02 17:22:10

试试这个:：

   function onClickRight()
    {
        $('#mydiv').css({ 'right': '','animation-delay':'3s' }).animate({'right': '-95%'});
    }

    function RightToCenter()
    {
        $('#mydiv').css({ 'right': '','animation-delay':'3s' }).animate({'right': ''});
    }

    function onCLickLeft()
    { 
       $('#mydiv').css({ 'left': '','animation-delay':'3s' }).animate({'left': '-95%'});
    }

    function LefttoCenter()
    {
        $('#mydiv').css({ 'left': '','animation-delay':'3s' }).animate({'left': ''});
    }

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18011428

复制

相似问题

问JQuery silde向后和向后水平移动
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery silde向后和向后水平移动EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery silde向后和向后水平移动
EN