Javascript 我需要动画我的div从离开页面的右边到中间

我正在制作一个站点，jquery用于将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');
    }
  });
});

---

您可以使用如下函数：

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

我使用

.toggle

而不是

#toggle

，因为ID在文档中必须是唯一的

---

选中此

ID属性不应重复。如果您有多个项目，请改用类选择器。下面是一个div

CSS

HTML

---

jshiddle

也许我刚才举的这个例子可以帮助回答您的问题。我已经贴在上面了，代码如下。这不是一个完美的例子，您的标记和样式可能会有所不同，但希望它展示了一种简单而灵活的方式来组织JavaScript。最好的方法取决于您的具体需求和可用的工具

HTML JavaScript

---

你能添加你的HTML结构吗？这些是与上面文本相关的div，请点击这里！我猜每个div都有一个链接，见我的示例：：）byeee

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

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

$(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');
    }
  });
});

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

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;
    }

$(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]);
    });

});