Question

我一直关注Youtube频道Devtips上的一个项目。 Everyting工作正常，直到我尝试使用JavaScript创建幻灯片效果。单击链接制作幻灯片时没有任何反应。

CSS：

.alt-section{
    padding-top: 50px;
    background-color: #e4e7ec;
}

.section-work{
    overflow-x: hidden;
}

.work-belt{
    width: 200%;
    position: relative;
    left: 0%;
}

.thumb-wrap, .work-wrap{
    width: 50%;
    float: left;
} 

.thumb-container{
    max-width: 960px;
    margin: 0px auto;
    padding-bottom: 100px;
    overflow: auto;
}

.work-container{
    max-width: 960px;
    margin: 0px auto;

}

.work-container > img{
    max-width: 100%;
    margin-bottom: 20px;

}

.work-return{
    width: 25px;
    height: 25px;
    cursor: pointer;
    opacity: 0.8;
    position: absolute;
    margin-left: -45px;
}

@media (max-width: 740px){
    .work-container{

    }

    .work-return{
        margin-left: 0px;
    }
    #work2{
        margin-left: 30px;
    }
}

.work-return:hover{
    opacity: 1;
}

.thumb-unit{
    width: 25%;
    display: block;
    float: left;
    background-image: url(http://goo.gl/yAzmRg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 16%;
    overflow: hidden;
}

.thumb-unit:hover .thumb-overlay{
    -webkit-animation: animation 1000ms linear both;
    animation: animation 1000ms linear both;
}

.thumb-unit2{
    width: 25%;
    display: block;
    float: left;
    background-image: url(http://goo.gl/BDUPbm);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 16%;
    overflow: hidden;
}

.thumb-unit2:hover .thumb-overlay{
    -webkit-animation: animation 1000ms linear both;
    animation: animation 1000ms linear both;
}

.thumb-unit3{
    width: 25%;
    display: block;
    float: left;
    background-image: url(http://goo.gl/dwUDmj);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 16%;
    overflow: hidden;
}

.thumb-unit3:hover .thumb-overlay{
    -webkit-animation: animation 1000ms linear both;
    animation: animation 1000ms linear both;
}

.thumb-unit4{
    width: 25%;
    display: block;
    float: left;
    background-image: url(http://goo.gl/YQknM6);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 16%;
    overflow: hidden;
}

.thumb-unit4:hover .thumb-overlay{
    -webkit-animation: animation 1000ms linear both;
    animation: animation 1000ms linear both;
}

.thumb-unit5{
    width: 25%;
    display: block;
    float: left;
    background-image: url(http://goo.gl/7eAsC3);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 16%;
    overflow: hidden;
}

.thumb-unit5:hover .thumb-overlay{
    -webkit-animation: animation 1000ms linear both;
    animation: animation 1000ms linear both;
}

.thumb-unit6{
    width: 25%;
    display: block;
    float: left;
    background-image: url(http://goo.gl/j6h4iX);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 16%;
    overflow: hidden;
}

.thumb-unit6:hover .thumb-overlay{
    -webkit-animation: animation 1000ms linear both;
    animation: animation 1000ms linear both;
}

.thumb-unit7{
    width: 25%;
    display: block;
    float: left;
    background-image: url(http://goo.gl/sDYiyH);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 16%;
    overflow: hidden;
}

.thumb-unit7:hover .thumb-overlay{
    -webkit-animation: animation 1000ms linear both;
    animation: animation 1000ms linear both;
}

.thumb-unit8{
    width: 25%;
    display: block;
    float: left;
    background-image: url(http://goo.gl/PlRIEF);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 16%;
    overflow: hidden;
}

.thumb-unit8:hover .thumb-overlay{
    -webkit-animation: animation 1000ms linear both;
    animation: animation 1000ms linear both;
}


.thumb-overlay{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    cursor: pointer;
    text-decoration: none;
    position: absolute;
    top: 0%;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: rgba(248,23,67,0.5);
    height: 100%;

    -webkit-transition-delay: 0.2s; /* Safari */
    transition-delay: 0.2s;

    -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

JavaScript的：

$(document).ready(function(){
    });

$(function(){
    workBelt();
});

function workBelt(){
    $('.thumb-unit').click(function(){
        $('.work-belt').css('left','-100%');
    });

    $('.work-return').click(function(){
        $('.work-belt').css('left','0%');
    });
}

HTML：

<section class="alt-section section-work">
<h3 id="work">Work</h3>
<div class="work-belt">

<div class="work-wrap">
<div class="thumb-container">
<div href="" class="thumb-unit">
<div class="thumb-overlay">
<strong>Chouchou</strong>
</div>
</div>

<div href="" class="thumb-unit2">
<div class="thumb-overlay">
<strong>Libellule</strong>
</div>
</div>

<div href="" class="thumb-unit3">
<div class="thumb-overlay">
<strong>Magnifique</strong>
</div>
</div>

<div href="" class="thumb-unit4">
<div class="thumb-overlay">
<strong>Soirée</strong>
</div>
</div>

<div href="" class="thumb-unit5">
<div class="thumb-overlay">
<strong>Tournesol</strong>
</div>
</div>

<div href="" class="thumb-unit6">
<div class="thumb-overlay">
<strong>Coquelicot</strong>
</div>
</div>

<div href="" class="thumb-unit7">
<div class="thumb-overlay">
<strong>Florilège</strong>
</div>
</div>

<div href="" class="thumb-unit8">
<div class="thumb-overlay">
<strong>Pamplemousse</strong>
</div>
</div>
</div>
</div>

<div class="work-wrap">
<div class="work-container">
<div class="work-return"><img src="Img/arrow.png" width="25px" height="25px"></div>
<h3 id="work2">Do work</h3>
<div style="width: 500px; height: 500px; background: #CCC;"></div>
<p>Testing text.</p>

<div style="width: 500px; height: 500px; background: #CCC;"></div>
<p>Testing text.</p>

<div style="width: 500px; height: 500px; background: #CCC;"></div>
<p>Testing text.</p></div>
</div>

</div>
</section>

Answer 1

您应该使用jQuery＆＃39; $.animate()来执行此操作，因为$.css()会直接设置值。

$('.work-belt').animate({'left': '-100%'}, 1000);

Try it

Answer 2

blex提供的解决方案是可以接受的但我觉得你只想使用css过渡来滑动元素。如果是这种情况，你的CSS风格缺乏重要的过渡，将动画html节点：

.work-belt{
    width: 200%;
    position: relative;
    left: 0%;
    -webkit-transition: left 0.7s linear;
    transition: left 0.7s linear;
}

你可以看到课程＆＃34;工作带＆＃34;现在在其样式定义中有2条额外的行。

  transition: left 0.7s linear;

上面一行告诉浏览器动画＆＃34;左＆＃34; html节点的属性。动画应持续0.7秒（700毫秒）＆amp;它应该是线性的。以＆＃39; -webkit开头的行 - ＆＃39;前缀与webkit浏览器相同，但前缀相同。

请查看working example on jsBin playground。添加了元素：参考jQuery库+修复了css。

另外请检查其余的css样式 - 我很喜欢这样的样式：

-webkit-animation: animation 1000ms linear both;
animation: animation 1000ms linear both;

不正确。对于动画，你应该使用＆＃34;过渡＆＃34;。

希望能帮助你。

使用javascript创建幻灯片效果

2 个答案:

Try it