滑动效果没有工作

我想在滑块上获得很好的滑动效果（从左到右）。但它不适用于转换和jQuery。滑动效果没有工作

我的代码有什么问题吗？

$(document).ready(function() { 
 
    $('.weiter').click(function() { 
 
    if ($('.eins').hasClass('active')) { 
 
     $('.eins').removeClass('active'); 
 
     $('.zwei').addClass('active'); 
 
    } else if ($('.zwei').hasClass('active')) { 
 
     $('.zwei').removeClass('active'); 
 
     $('.eins').addClass('active'); 
 
    } 
 
    }); 
 
});

header { 
 
    height: 250px; 
 
    width: 100%; 
 
    display: inline-block; 
 
    margin-bottom: 20px; 
 
} 
 
header section.eins { 
 
    background: url("http://www.petakids.com/wp-content/uploads/2015/07/sheep-and-lambs-in-field.jpg"); 
 
} 
 
header section.zwei { 
 
    background: url("https://aos.iacpublishinglabs.com/question/aq/700px-394px/long-sheep-pregnant_1b7dbe4ddad4dd1.jpg?domain=cx.aos.ask.com"); 
 
} 
 
header section { 
 
    height: 0; 
 
    visibility: hidden; 
 
    width: 0; 
 
    float: left; 
 
} 
 
header section.active { 
 
    float: left; 
 
    height: 100%; 
 
    width: 100%; 
 
    visibility: visible; 
 
} 
 
.weiter { 
 
    display: block; 
 
    cursor: pointer; 
 
    height: 50px; 
 
    background: red; 
 
    width: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <i class="weiter"></i> 
 

 
    <section class="eins active"> 
 
    <span> 
 
    \t <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> 
 
\t </span> 
 
    </section> 
 

 
    <section class="zwei"> 
 
    <span> 
 
    \t <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> 
 
\t </span> 
 
    </section> 
 

 
</header>

来源

2017-01-25 Jen

'有什么错误的，我code' - 没有错误，但没有提出任何应 “滑动” 在都在javascript或css –

你提到的'transition' css在哪里？ – Nope

滑块动画从您的代码失踪。我可以使用元素的位置属性添加一个简单的幻灯片切换。

更新小提琴：https://jsfiddle.net/f31moo7y/1/

参考代码：

$(document).ready(function() { 
 
    $('.weiter').click(function() { 
 
    if ($('.eins').hasClass('active')) { 
 
     $('.eins').removeClass('active'); 
 
     $('.zwei').addClass('active'); 
 
    } else if ($('.zwei').hasClass('active')) { 
 
     $('.zwei').removeClass('active'); 
 
     $('.eins').addClass('active'); 
 
    } 
 
    }); 
 
});

header { 
 
    height: 250px; 
 
    width: 100%; 
 
    display: inline-block; 
 
    margin-bottom: 20px; 
 
} 
 
header section.eins { 
 
    background: url("http://www.petakids.com/wp-content/uploads/2015/07/sheep-and-lambs-in-field.jpg"); 
 
} 
 
header section.zwei { 
 
    background: url("https://aos.iacpublishinglabs.com/question/aq/700px-394px/long-sheep-pregnant_1b7dbe4ddad4dd1.jpg?domain=cx.aos.ask.com"); 
 
} 
 
header section { 
 
    height: 0; 
 
    visibility: hidden; 
 
    width: 0; 
 
    float: left; 
 
    position: relative; 
 
    left: 100%; 
 
    transition: all .3s; 
 
} 
 
header section.active { 
 
    float: left; 
 
    position: relative; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    visibility: visible; 
 
} 
 
.weiter { 
 
    display: block; 
 
    cursor: pointer; 
 
    height: 50px; 
 
    background: red; 
 
    width: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <i class="weiter"></i> 
 

 
    <section class="eins active"> 
 
    <span> 
 
    \t <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> 
 
\t </span> 
 
    </section> 
 

 
    <section class="zwei"> 
 
    <span> 
 
    \t <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> 
 
\t </span> 
 
    </section> 
 

 
</header>

来源

2017-01-25 09:19:24 nashcheez

滑动效果没有工作

回答

相关问题