jQuery Left属性在动画中不起作用

时间：2018-08-27 00:19:16

标签： javascript jquery css

我想制作一个没有插件的轮播，因为我想学习如何从头开始制作一个，而我使用的插件（Slick）给我带来了一些样式问题。这是一个带有我的代码的jsfiddle：http://jsfiddle.net/xvac9usr/2/

我的主要问题是jQuery .animation（）不会添加到left属性，即使元素的位置是：relative。 HTML：

<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Card Carousel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">    

</head>

<body>
    <div class="carousel">    
         <button class="carousel__icon carousel__prev">
            Next
        </button>
        <ul class="carousel__list">

            <li class="carousel__item">
                <div class="card card__small">
                    <div class="card__image card__image--1">
                        <h1 class="heading-primary">Wild</h1>
                        <h2 class="heading-secondary">Nevada</h2>
                        <div class="card__tag-box">
                            <div class="card__tag">Beautiful</div>
                            <div class="card__tag">Rocky</div>
                        </div>
                    </div>
                </div>
            </li>           
            <li class="carousel__item">
                <div class="card">
                    <div class="card__image card__image--2">
                        <h1 class="heading-primary">Hot</h1>
                        <h2 class="heading-secondary">El Salvador</h2>
                        <div class="card__tag-box">
                            <div class="card__tag">Beautiful</div>
                            <div class="card__tag">Peaceful</div>
                            <div class="card__tag">Green</div>
                        </div>

                    </div>
                </div>
            </li>
            <li class="carousel__item">
                <div class="card card__active">
                    <div class="card__image card__image--3">
                        <h1 class="heading-primary">Refreshing</h1>
                        <h2 class="heading-secondary">Amazonas</h2>
                        <div class="card__tag-box">
                            <div class="card__tag">Beautiful</div>
                            <div class="card__tag">Rainy</div>
                            <div class="card__tag">Dangerous</div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="carousel__item">
                <div class="card">
                    <div class="card__image card__image--4">
                        <h1 class="heading-primary">Hot</h1>
                        <h2 class="heading-secondary">El Salvador</h2>
                        <div class="card__tag-box">
                            <div class="card__tag">Beautiful</div>
                            <div class="card__tag">Peaceful</div>
                            <div class="card__tag">Green</div>
                        </div>

                    </div>
                </div>
            </li>
            <li class="carousel__item">
                <div class="card card__small">
                    <div class="card__image card__image--5">
                        <h1 class="heading-primary">Hot</h1>
                        <h2 class="heading-secondary">El Salvador</h2>
                        <div class="card__tag-box">
                            <div class="card__tag">Beautiful</div>
                            <div class="card__tag">Peaceful</div>
                            <div class="card__tag">Green</div>
                        </div>

                    </div>
                </div>
            </li>            
        </ul>    
        <button class="carousel__icon carousel__next">
            Next
        </button>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>

</html>

CSS：

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  font-family: "Open Sans", sans-serif;
}

.card {
  overflow: hidden;
  width: 30rem;
  height: 60vh;
  border-radius: 0.8rem;
  box-shadow: 0px 122px 264px -115px black;
  transition: all 0.3s ease-out;
}
.card:hover {
  transform: translateY(-1rem);
  box-shadow: 0px 122px 264px -115px rgba(0, 0, 0, 0.7);
}
.card:not(:last-child) {
  margin-right: 9rem;
}
.card__image {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  padding: 3rem 0;
  z-index: 1;
  position: relative;
  text-align: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.card__image--1 {
  background-image: url("https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ea034e0fa9d41f2687c143ab9ab7a30f&auto=format&fit=crop&w=645&q=80");
}
.card__image--2 {
  background-image: url("https://images.unsplash.com/photo-1485237254814-0003b25e5672?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d9ee4c294ead6d83c34334b2f19508fe&auto=format&fit=crop&w=2089&q=80");
}
.card__image--3 {
  background-image: url("https://images.unsplash.com/photo-1517174637803-6929e01b6e63?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=24a8fc94192aa7a08c7a3575c7190980&auto=format&fit=crop&w=634&q=80");
}
.card__image--4 {
  background-image: url("https://images.unsplash.com/photo-1534990874943-dceb856eff5b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f9c8dbe969d60257bef71ac433ba7575&auto=format&fit=crop&w=634&q=80");
}
.card__image--5 {
  background-image: url("https://images.unsplash.com/photo-1535089894977-83d4c8854f62?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0e70b451b32ef8730ad0620338ff4e49&auto=format&fit=crop&w=754&q=80");
}
.card__image:hover {
  transform: scale(1.03);
}
.card__tag-box {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 2rem 3rem;
  display: flex;
  flex-wrap: wrap;
}
.card__tag {
  border: solid 1px white;
  padding: 3px 5px;
  border-radius: 3px;
  transition: transform 0.2s, background-position 0.3s ease-out;
  background-image: linear-gradient(
    120deg,
    transparent 0%,
    transparent 50%,
    #9e9e9e 50%
  );
  background-size: 225%;
  display: inline-block;
  margin: 0.2rem 0;
}
.card__tag:hover {
  background-position: 100%;
  transform: translateY(-0.2rem);
}
.card__tag:not(:last-child) {
  margin-right: 1rem;
}
.card__active {
  transform: translateY(-0.5rem) scale(1.1);
}
.card__active:hover {
  transform: translateY(-2rem) scale(1.1);
}
.card__small {
  transform: scale(0.9);
}
.card__small:hover {
  transform: translateY(-1rem) scale(0.9);
}

.carousel {
  height: 100vh;
  position: relative;
}
.carousel__list {
  position: relative;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style-type: none;
}
.carousel__item {
  position: relative;
}
.carousel__item:not(:last-child) {
  margin-right: 4%;
}
.carousel__icon {
  cursor: pointer;
  position: absolute;
  width: 5rem;
  height: 5rem;
}
.carousel__prev {
  left: 0;
  top: 50%;
  z-index: 100;
}
.carousel__next {
  right: 0;
  top: 50%;
  z-index: 100;
}

body {
  font-family: "Open Sans", sans-serif;
  font-size: 1.4rem;
}

.heading-primary {
  font-weight: 300;
  letter-spacing: 1px;
  font-size: 2em;
}

.heading-secondary {
  font-size: 1.7rem;
  font-weight: 300;
  letter-spacing: 1px;
}

JS：

$(document).ready(() => {    

    $('.carousel__next').click(e =>{
        e.preventDefault();

    });

    $('.carousel__prev').click(e => {
        e.preventDefault();         
        moveRight();
    });      

    let centerItem = Math.ceil(($(".carousel__item").length / 2));
    $(`.carousel__item:nth-child(${centerItem})`).click(() => {
        alert('clicked');
    });

    $(`.carousel__item:nth-child(${centerItem})`).animate({
        left: '+= 300',
    }, 300, () => {
        console.log('done');
    });

});

0 个答案:

没有答案
相关问题
最新问题