0
I'm working on this page you can see here.Let's Get Startedをクリックした後、右のシェブロンをクリックすると、divの左にうまく移動して収縮しません。しかし、「戻る」または左を指しているシェブロンをクリックすると、divは右のように移動する必要がありますが、縮小しますが、これは望ましくありません。jQuery Divは、右に移動すると収縮しますが、左に移動しません。
divsを右に移動させるにはどうしたらよいですか？私は、あなたが何が起こっているかを見ることができるようにdivがページからずっと動かないようにCSSを変更しました。ここで
は仕事をやっているというのが私の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はちょうど左右のシェブロンを管理します。 .cardと呼ばれるCSSクラスで
その後、私の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>
Booyah！あまりにもありがとう、ちょうど約5時間を保存しました！私はこの答を受け入れるつもりです。 – ToddT
笑、どうぞよろしくお願いいたします。それはあなたのために働いてうれしい=） – somdow