Question

以下代码：

           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%。

那么我做错了什么？

提前谢谢

http://jsfiddle.net/46bu6orf/

！更新：！ 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添加到容器中，它可以正常工作。

Answer 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不会更好。我稍后会调查并更新我的发现。我希望上面的例子至少可以为其他人提供一个更好的起点

Answer 2

尝试更改以下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，我在模拟器上试过。

请知道这是否有效

jQuery在计算机上工作但在iPad上没有？

2 个答案: