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

时间:2014-10-01 09:35:39

标签: 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; 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添加到容器中,它可以正常工作。

2 个答案:

答案 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,我在模拟器上试过。

请知道这是否有效