以下代码:
if(!$($texte).parent().hasClass('text-bg'))
$texte = $($texte).parent();
if($($texte).hasClass('text-left')){
flag = $texte.data('animToggle');
$texte.data('animToggle', !flag);
$texte.animate({
'left': flag ? '-48%' : '0'
})
}
if($($texte).hasClass('text-right')){
flag = $texte.data('animToggle');
$texte.data('animToggle', !flag);
$texte.animate({
'right': flag ? '-48%' : '0'
})
}
在计算机上一切正常。问题如下:在我的iPad上,左边的动画完美无瑕,但正确的动画错误。当我第一次点击它时,它就会跳出来。在第二次单击使div再次生成动画时,它动画就好了。这些的CSS仅适用于左侧的position:absolute; left:-48%;
,而右侧的CSS仅适用于right:-48%
。
那么我做错了什么?
提前谢谢
!更新:! TrueBlueAussie的解决方案与我的改变相结合现在起作用:
$(document).on('click', function (event) {
var $texte = $(event.target);
// Find the closest sliding container to the item clicked (match either class)
var $bar = $texte.closest('.text-right, .text-left');
// Get the animation open/closed flag
var flag = $bar.data('animToggle');
// toggle the animation flag and store it
$bar.data('animToggle', !flag);
// If this is a left bar animate left edge
if ($bar.hasClass('text-left')) {
flag ? $bar.css('left', '-52%') : $bar.css('left','0');
// Reverse flag for left to show correct < >
flag = !flag;
}
// If this is a right bar animate right edge
if ($bar.hasClass('text-right')) {
flag ? $bar.css('right', '-52%') : $bar.css('right','0');
}
// Toggle the < > display
var $span = $bar.find('.pfeil');
$span.html(flag ? '<' : '>');
});
似乎.animate&#39;对&#39;属性在iPad上有一个错误。通过使用jQuery&#39; .css
并将transition
添加到容器中,它可以正常工作。
答案 0 :(得分:1)
这不是最终答案,因为需要更多信息,但此处有太多信息需要评论。有很多问题我做了一个完整的重写,以简化代码并理解发生了什么。
我还修改了HTML和样式,以便两个左右两个面板同时可用。
目前为止的结果是:http://jsfiddle.net/TrueBlueAussie/46bu6orf/18/
$(document).on('click', function (event) {
var $texte = $(event.target);
// Find the closest sliding container to the item clicked (match either class)
var $bar = $texte.closest('.text-right, .text-left');
// Get the animation open/closed flag
var flag = $bar.data('animToggle');
// toggle the animation flag and store it
$bar.data('animToggle', !flag);
// If this is a left bar animate left edge
if ($bar.hasClass('text-left')) {
$bar.animate({
'left': flag ? '-48%' : '0'
})
// Reverse flag for left to show correct < >
flag = !flag;
}
// If this is a right bar animate right edge
if ($bar.hasClass('text-right')) {
$bar.animate({
'right': flag ? '-48%' : '0'
})
}
// Toggle the < > display based on the open/closed flag
var $span = $bar.find('.pfeil');
$span.html(flag ? '<' : '>');
});
这一切都可以进一步简化,但很快你就不会认识到它了:)
我立即注意到样式与我的iPhone不兼容,这表明我的iPad不会更好。我稍后会调查并更新我的发现。我希望上面的例子至少可以为其他人提供一个更好的起点
答案 1 :(得分:0)
尝试更改以下css属性,也许这项工作和lemme知道:
.text-bg {
background: none repeat scroll 0 0 #777;
height: 500px;
overflow: hidden; /*This will hide rest part of slider giving your page better look*/
position: relative;
width: 300px; /*add width maybe 100% or whichever you want*/
}
注意:我不欠ipad,我在模拟器上试过。
请知道这是否有效