Javascript 当向右移动而不是向左移动时，jQuery Div会收缩
当你点击Javascript 当向右移动而不是向左移动时，jQuery Div会收缩,javascript,jquery,html,css,Javascript,Jquery,Html,Css,当你点击让我们开始然后点击随后的右V形时，div会很好地向左移动，不会收缩。但是，如果单击“后退”或指向左侧的V形，则div会像应该的那样向右移动，但也会收缩，这是我不希望看到的 我怎样才能使div向右移动而不收缩？我已经更改了css，这样div就不会一直离开页面，这样您就可以看到发生了什么 下面是我的jQuery，它正在做这项工作： function forward(){ console.log("forward ran"); // debugger; console.log("i
让我们开始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();
}
managechevron@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>
<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>
雪佛龙左
这是#4
美国：xxx
EU:xxx
你将需要得到承运人计算运费
在您的商店上启用。如果你签字的话，它是免费的
为了年度计划，否则每月只需20美元。
请致电Shopify以启用它：
美国：xxx
EU:xxx
以每月25美元的价格，我们可以满足不限数量的
命令，所以你没有太多
欢迎使用ByteStand的FBA Shipping。
自动化完成FBA项目的超级简单方法
在美国和国外
让我们开始吧！
雪佛龙右
.card“max width:500px；”中删除“max”
所以基本上只要把它做成“宽度：500px；”