jQuery在电脑上工作，但在iPad上不工作？

以下代码：

           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；左-48%和刚刚切换的右侧
右侧：-48%

那么我做错了什么

先谢谢你


!！更新：！TrueBlueAustie的解决方案与我的改变相结合，现在起作用了：

$(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 ? '<' : '>');
});

$（文档）。在（'click'）上，函数（事件）{
var$texte=$（event.target）；
//查找与单击的项目最近的滑动容器（匹配任一类）
var$bar=$texte.closest（'.text-right，.text-left'）；
//获取动画打开/关闭标志
var标志=$bar.data（'animToggle'）；
//切换动画标志并将其存储
$bar.data（'animToggle'，！flag）；
//如果这是一个左栏，请设置左边缘动画
if（$bar.hasClass（'text-left'））{
标志？$bar.css（'left'，'-52%'）：$bar.css（'left'，'0'）；
//左侧的倒车标志显示正确<>
flag=！flag；
}
//如果这是右栏，请设置右边缘动画
if（$bar.hasClass（'text-right'））{
标志？$bar.css（'right'，'-52%'）：$bar.css（'right'，'0'）；
}
//切换<>显示
var$span=$bar.find（'.pfeil'）；
$span.html（标志？“”）；
});

似乎。动画“right”属性在iPad上有一个bug。通过使用jQuery的
.css
并向容器中添加
transition
，它可以工作
 尝试更改以下css属性，也许这项工作和我都知道：

.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，我在模拟器上试过

请让我知道这是否有效
这不是最终答案，因为需要更多信息，但这里的信息太多，无法发表评论。有太多的问题，我做了一个完整的重新编写，以简化代码，并了解发生了什么

我还修改了HTML和样式，使左右面板同时可用

以下是迄今为止的结果：

$（文档）。在（'click'）上，函数（事件）{
var$texte=$（event.target）；
//查找与单击的项目最近的滑动容器（匹配任一类）
var$bar=$texte.closest（'.text-right，.text-left'）；
//获取动画打开/关闭标志
var标志=$bar.data（'animToggle'）；
//切换动画标志并将其存储
$bar.data（'animToggle'，！flag）；
//如果这是一个左栏，请设置左边缘动画
if（$bar.hasClass（'text-left'））{
$bar.animate({
“左”：标志？“-48%”：“0”
})
//左侧的倒车标志显示正确<>
flag=！flag；
}
//如果这是右栏，请设置右边缘动画
if（$bar.hasClass（'text-right'））{
$bar.animate({
“右”：标志？“-48%”：“0”
})
}
//根据打开/关闭标志切换<>显示
var$span=$bar.find（'.pfeil'）；
$span.html（标志？“”）；
});

这一切都可以进一步简化，但很快你就认不出来了：）

我立刻注意到它的样式与我的iPhone不兼容，这表明我的iPad不会更好。我稍后会调查并更新我的发现。我希望上面的示例至少能为其他人提供一个更好的起点
您能提供一个工作的JSFIDLE以便我们进行比较吗？您有很多代码在示例中似乎什么都没有做，很多子长度的错误检查总是正确的（几乎每一个
if
都应该检查
length
）。还有一个简单的
var$texte=$（event.target）；
作为第一行将消除对
$（$texte）
的需要。我建议您清理并注释代码，因为您提到的问题可能只是另一个问题的副作用。：）后续：当我纠正了提到的一些错误时（例如，如果检查到不正确的
），代码会停止以前的工作，这意味着所写的逻辑不正确，但您不会知道。请务必对你的代码进行注释，以便其意图明确。你能告诉我你上次的注释是什么意思吗？因为对我来说，代码很好用，而你编辑的代码也同样好用？+1：谢谢你的赏金。几乎感觉像是得到了报酬：）哦，好吧，伙计，需要在ipad上尝试和测试，到时候会让你知道的。嘿，谢谢你的回答。我注意到我的代码有一个问题，因为当我单击容器而不是文本或箭头时，函数将无法工作。这段代码已经好多了。尽管它没有用正确的动画解决问题。你看到了吗，左边的动画效果很好，但右边却不行？再次感谢你！我成功了！！！！jQuery的.animate似乎有问题。我把.animate改为.css，只是改变了css的left或right属性，然后我在我的容器上添加了transition，效果很好！谢谢你的代码，我从中学到了很多！如果需要，您可以将css解决方案添加到代码中，这样我就可以将其标记为正确answer@Frederik维特：自由。。。很高兴你把它分类了（也很高兴你喜欢这些改进）：）
$(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 ? '<' : '>');
});