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%.
那么我做错了什么?
先感谢您
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’right’属性在iPad上有一个错误.通过使用jquery的.CSS并向容器添加转换,它可以工作.
解决方法 这不是最终答案,因为需要更多信息,但这里有太多的信息可供评论.有很多问题我做了一个完整的重写,以简化代码并理解发生了什么.我还修改了HTML和样式,以便左右面板同时可用.
到目前为止的结果如下:http://jsfiddle.net/TrueBlueAussie/46bu6orf/18/
$(document).on('click',!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不会更好.我稍后会调查并更新我的发现.我希望上面的例子至少能为其他人提供一个更好的起点
总结以上是内存溢出为你收集整理的jQuery在计算机上工作但在iPad上没有?全部内容,希望文章能够帮你解决jQuery在计算机上工作但在iPad上没有?所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)