Question

I'm working on this page you can see here.当您点击Let's Get Started然后点击后续的右V形时，div会很好地向左移动而不会缩小。但是，如果您单击＆＃34;返回＆＃34;或左指点V形，div向右移动，但它也缩小了，这是我不想要的。

如何让div向右移动而不缩小？我已经改变了css，这样div就不会一直移动到页面上，所以你可以看到发生了什么。

以下是我的jQuery正在做的工作：

function forward(){
  console.log("forward ran");
  // debugger;
  console.log("in forward page is " + page + " before adding");  
  $('#' + page).addClass( "gone_left", 1000, "swing" );
  page = page + 1;
  $('#' + page).removeClass("gone_left gone_right");
  console.log("in forward page is " + page + " after adding");
  manageChevrons();
}

function back(){
  console.log("back ran");
  // debugger;
  console.log("in back page is " + page + " before adding");   
  $('#' + page).addClass( "gone_right", 1000, "swing");
  page = page - 1;
  $('#' + page).removeClass("gone_left gone_right");
  manageChevrons();
}

manageChevrons只管理右翼和左翼V形臂。

然后我的CSS

@media only screen and (min-width: 900px){
html {
    font-size: 18px;
  }
}

.no_overflow {
  overflow: hidden !important;
}

.gone_left {
    left: -5% !important;
}

.gone_right {
    left: 90% !important;
}

.card_center {
  position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(-50%) !important;
    left: 50%;
}

最后是页面的HTML

<html>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>

<body class="no_overflow">

  <div class="container top-pad">
    <div class="row">
      <div class="col s4">
        <%= image_tag "logo.png", class:"responsive-img" %>
      </div>
    </div>
  </div>

<div class="container">
  <div class="row valign-wrapper">
    <div class="left_chevron">
      <i id="chevron_left" class="waves-effect waves-circle large material-icons purple-text text-darken-4 hidden left_chevron">chevron_left</i>
    </div>

      <div id="3" class="card large card_center">
        <div class="card-image">
          <%= image_tag "3.png" %> 
          <span class="card-title"></span>
        </div>
        <div class="card-content card_position">
          <p>This is #4
            <ul>US: xxx</ul>
            <ul>EU: xxx</ul>  
          </p>
        </div>
      </div> <!-- end of fourth card -->

      <div id="2" class="card large card_center">
        <div class="card-image">
          <%= image_tag "2.png" %> 
          <span class="card-title"></span>
        </div>
        <div class="card-content card_position">
          <p>You will need to get carrier calculated shipping
            enabled on your store. Its free if you signed
            up for the annual plan, otherwise its just $20/month.
            Call Shopify to enable it:
            <ul>US: xxx</ul>
            <ul>EU: xxx</ul>  
          </p>
        </div>
      </div> <!-- end of third card -->

      <div id="1" class="card large card_center">
        <div class="card-image">
          <%= image_tag "1.png" %> 
          <span class="card-title"></span>
        </div>
        <div class="card-content card_position">
          <p>For $25/month we fulfill an unlimited number of
            orders, so you don't have too.</p>
        </div>
      </div> <!-- end of second card -->      

      <div id="0" class="card large card_center">
        <div class="card-image"> 
          <%= image_tag "hi.png" %> 
          <span class="card-title"></span>
        </div>
        <div class="card-content card_position">
          <p>Welcome to FBA Shipping by ByteStand.
            A super simple way to automate fulfilling FBA items
            in the US and abroad.</p>
        </div>
        <div class="card-action">
          <button id="first_button" class="waves-effect btn stroke-btn tap">Let's Get Started!</button>
        </div>
      </div><!-- end of first card -->


    <div class="right_chevron">
      <i id="chevron_right" class="waves-effect waves-circle large material-icons purple-text text-darken-4 hidden right_chevron">chevron_right</i>
    </div>
    </div> <!-- end of main row -->
  </div> <!-- end of container -->

  </body>
</html>

Answer 1

在名为.card的CSS类中，从"max"删除"max-width:500px;"

所以基本上只需要它"width:500px;"即可。

向右移动但不向左移动jQuery Div缩小

1 个答案: