- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
好的,所以如果我不向 .slide
类添加过渡属性,这个示例就可以正常工作。如果我添加此过渡属性,则通过 jquery 设置的 right
属性不会按预期工作。加减太多了。
代码如下:
$(function(){
$("#with-transition").click(function() {
$(document.body).toggleClass("with-transition", this.value);
}).trigger("click");
var curSlide = 0;
$('.arrow-left').click(function(){
var $slideContainer = $('.slides');
var $slide = $slideContainer.find('.slide');
curSlide++;
if(curSlide === $slide.length){
$slide.css({"right":"-=200%"});
curSlide = 0;
} else {
$slide.css({"right":"+=100%"});
}
});
})
html, body {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #efefef;
position: relative;
}
.container {
width: 600px;
height: 300px;
background-color: #17A05E;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.slides {
width: 100%;
height: 100%;
position: relative;
}
body.with-transition .slide {
-webkit-transition: all 400ms ease-in;
transition: all 400ms ease-in;
}
.slide1, .slide2, .slide3 {
width: 600px;
height: 200px;
position: absolute;
}
.slide1 {
background-color: #DD4E42;
right: -200%;
}
.slide2 {
background-color: #DF6026;
right: -100%;
}
.slide3 {
background-color: #F1990D;
right: 0;
}
.nav {
position: absolute;
left: 0;
right: 0;
top: 50%;
z-index: 1000;
}
.nav .arrow-left, .nav .arrow-right {
width: 50px;
height: 50px;
background-color: rgba(255, 255, 255, 0.4);
position: absolute;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.nav .arrow-left {
left: 0;
}
.nav .arrow-right {
right: 0;
}
.arrow-left:hover, .arrow-right:hover {
background-color: rgba(255, 255, 255, 0.9);
}
<label><input type="checkbox" id="with-transition"> Include transition</label>
<div class="container">
<div class="slides">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</div>
<div class="nav">
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
当您单击左下方较浅的橙色框时,就会发生转换。为了检查差异,在勾选和不勾选复选框的情况下都尝试一下,这决定了是否包含过渡。现在,我想要的是,如何使这段代码在有过渡的情况下工作,就像它在没有过渡的情况下工作一样。
最佳答案
所以,我无法用百分比解决这个问题。如果我在正确的属性中使用像素而不是百分比,那么它可以很好地处理过渡,否则它会向正确的属性添加太多内容。
但我现在所做的是使用 transform: translate(x,y)
属性来解决这个问题。
它按预期和我想要的方式工作。除了相对于它的位置移动它之外,我创建了一个名为 xPos
的新变量,并赋予它 100
的值,并在我的 translate (x) 属性中使用了这个变量。
这是这个较新版本的 Jquery:
$(function(){
var curSlide = 0;
var xPos = 100;
$('.arrow-left').click(function(){
var $slideContainer = $('.slides');
var $slide = $slideContainer.find('.slide');
curSlide++;
if(curSlide === $slide.length){
$slide.css({'transform':'translate('+(xPos-xPos)+'%, 0)'});
curSlide = 0;
xPos = 100;
} else {
$slide.css({'transform':'translate(-'+xPos+'%, 0)'});
xPos = xPos + 100;
}
});
});
尽管如此,如果有人知道为什么当我在正确的属性上使用百分比以及 css 转换时会出现这种奇怪的行为,我会非常乐意知道!
关于javascript - 添加 Transition 正在更改 Jquery 设置的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38812705/
我有一个加号/减号按钮,希望用户不能选择超过 20 个但不知道如何让它工作。我尝试使用 min="1"max="5 属性,但它们不起作用。这是我的代码和一个 fiddle 链接。https://jsf
我正在尝试复制顶部底部图,如示例 here但它没有正确渲染(紫色系列有 +ve 和 -ve 值,绿色为负值)留下杂乱的人工制品。我也在努力创建一个玩具示例来复制这个问题,所以我希望尽管我缺乏数据,但有
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 这个问题似乎与 help center 中定义的范围内的编程无关。 . 已关闭 6 年前。 社区去年审查了是
这个问题在这里已经有了答案: Adding two positive integers gives negative answer.Why? (4 个答案) 关闭 5 年前。 我遇到了一个奇怪的问题
有谁知道如何将字符串值类型 -4,5 或 5,4 转换为 double -4.5 或 5.4? 最佳答案 只需使用 Double.parseDouble(Locale, String); 糟糕,我很困
我正在尝试根据 TextBlob 分类插入一个仅包含“正”或“负”字符串的新数据框列:对于我的 df 的第一行,结果是 ( pos , 0.75, 0.2499999999999997)我想要' 正
我对 VBA 非常陌生,无法理解如何在一个循环中完成 2 个任务。我非常感谢您的帮助。 我已经能够根据第 3 列中的数据更改第 2 列中的数值,但我不明白如何将负值的字体更改为红色。 表格的大小每月都
欢迎, 我正在使用 jquery 通过 POST 发送表单。 这就是我获得值(value)的方式。 var mytext = $("#textareaid").val(); var dataStrin
double d = 0; // random decimal value with it's integral part within the range of Int32 and always p
我有这个字符串: var a='abc123#xyz123'; 我想构建 2 个正则表达式替换函数: 1) 用 '*' 替换所有确实有 future '#'的字符(不包括'#') 所以结果应该是这样的
我正在使用 DialogFragment。当用户从 Gmail 平板电脑应用程序的屏幕与下面示例图片中的编辑文本进行交互时,我希望正面和负面按钮保持在键盘上方。 在我的尝试中不起作用,这是我的 Dia
从组装艺术一书中,我复制了这句话: In the two’s complement system, the H.O. bit of a number is a sign bit. If the H.O
是否有更好更优雅的方法来实现下面的简单代码(diffYear、A 和 B 是数字): diffYear = yearA - yearB; if (diffYear == 0) { A = B
我正在设计一种语言,并尝试确定 true 应该是 0x01 还是 0xFF。显然,所有非零值都将转换为 true,但我正在尝试确定确切的内部表示。 每种选择的优点和缺点是什么? 最佳答案 没关系,只要
在我的 dialogfragment 类的 OnCreateDialog 中,我正在这样做: AlertDialog.Builder builder = new AlertDialog.Builder
这个问题在这里已经有了答案: Resolving ambiguous overload on function pointer and std::function for a lambda usin
我偶然发现了一个奇怪的 NSDecimalNumber 行为:对于某些值,调用 integerValue、longValue、longLongValue 等,返回意想不到的值(value)。示例: l
这个问题在这里已经有了答案: Resolving ambiguous overload on function pointer and std::function for a lambda using
我有这个正则表达式来测试用户输入是否有效: value.length === 0 || value === '-' || (!isNaN(parseFloat(value)) && /^-?\d+\.
我想用高斯混合模型拟合数据集,数据集包含大约 120k 个样本,每个样本有大约 130 个维度。当我使用 matlab 执行此操作时,我运行脚本(簇号为 1000): gm = fitgmdist(d
我是一名优秀的程序员,十分优秀!