Question

我正在创建一个网站，其中使用jquery将div从网站右侧滑到中间，再次点击时让它返回。我能够让它从左到中再到后面。在决赛中，我需要它有多个div，点击第一个链接带来一个div，然后点击第二个div，第一个div关闭屏幕，第二个到位。我将包括我在这里的内容。

$(document).ready(function(){
  $('#toggle').click(function(){
    var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
      hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
    } else {
      hidden.animate({"left":"75px"}, "slow").addClass('visible');
    }
  });
});

Answer 1

你可以拥有这样的功能：

$(document).ready(function(){
  $('.toggle').click(function(e){
    e.preventDefault();
    $('.hidden').animate({"left":"100%"}, "slow");
    $(this).next('.hidden').animate({"left":"0"}, "slow");
  });
});

我使用.toggle代替#toggle，因为ID在文档中必须是唯一的。

选中 Demo Fiddle

Answer 2

ID属性不应该重复。如果您有多个项目，则使用类选择器。以下是一个div。

CSS

body{overflow:hidden;}
.hidden{position:relative;border:1px solid red;width:6%;left:110%;}

HTML

<a href="#" id="toggle">Click</a>
<div class="hidden">asds</div>

的jQuery

$(document).ready(function(){
  $('#toggle').click(function(e){
      e.preventDefault();
    var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
      hidden.animate({"left":"110%"}, "slow").removeClass('visible');
    } else {
      hidden.animate({"left":"53%"}, "slow").addClass('visible');
    }
  });
});

JSFiddle here

Answer 3

也许这个我刚刚掀起的例子将有助于回答你的问题。我已将其发布在jsFiddle here上，代码如下。它不是一个完美的例子，你的标记和样式可能会有所不同，但希望它能够显示一种组织JavaScript的简单而灵活的方式。最好的方法取决于您的具体要求和您可用的工具。

HTML

<button id="toggle">Toggle</button>
<div>
    <div id="first" class="toggleable hidden"></div>
    <div id="second" class="toggleable hidden"></div>
    <div id="third" class="toggleable hidden"></div>
</div>

CSS

div.toggleable {
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    top: 100px;
    }
div.toggleable.hidden {
    display: none;
    }
div#first {
    background-color: red;
    }
div#second {
    background-color: blue;
    }
div#third {
    background-color: green;
    }

的JavaScript

$(document).ready(function () {
    var sliderStates = [
        {
            "first": "hide",
            "second": "hide",
            "third": "hide"
        },
        {
            "first": "show",
            "second": "hide",
            "third": "hide"
        },
        {
            "first": "hide",
            "second": "show",
            "third": "hide"
        },
        {
            "first": "hide",
            "second": "hide",
            "third": "show"
        }    
    ];
    var sliderState = 0;

    var incrementState = function() {
        sliderState++;
        if (sliderState >= sliderStates.length)
            sliderState = 1; // Or use 0 if you want to go back to all hidden
    }

    var show = function($div) {
        $div.removeClass("hidden").animate({"left":"75px"}, "slow");
    }

    var hide = function($div) {
        $div.animate({"left":"-1000px"}, function() {
            $div.addClass("hidden");
        });
    }

    var showState = function(state) {
        $.each(["first", "second", "third"], function(index, element) {
            var $div = $("div#" + element);
            if (state[element] === "show")
                show($div);
            else
                hide($div);                
        });
    }

    $('#toggle').click(function() {
        incrementState();
        showState(sliderStates[sliderState]);
    });

});

我需要在右侧到中间的页面上为我的div设置动画

3 个答案:

HTML

CSS

的JavaScript