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

Question

我正在创建一个站点，其中 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');
    }
  });
});

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

});