我需要使div的動畫從右邊到中間的頁面離開

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在文檔中必須是唯一的。

檢查這個演示小提琴

Answer 2

ID屬性不應重復。 如果您有多個項目，請改用類選擇器。 以下是一格。

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 在這里

Answer 3

也許我剛剛舉過的這個例子將有助於回答您的問題。 我已經在jsFiddle上發布了它，下面是代碼。 這不是一個完美的例子，您的標記和樣式可能會有所不同，但希望它顯示了一種簡單而靈活的組織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]);
    });

});