Question

我喜欢Safari中的以下动画，但讨厌它在firefox中的作用（点击一个事件名称，然后点击页面底部的“上一篇文章”或“下一篇文章”）。有没有办法像在Safari中那样“平滑”动画？

编辑： 在Firefox中，当两个图像相互交叉时，会出现一种“白色闪光”。当页面向上滚动时（由于元素的高度变化），它看起来不稳定。在safari中，这种“闪光”不会发生，并且动画的滚动更加平滑（根本不是生涩）......这是我描述它的最佳方式。希望有所帮助！

（我是一个jQuery业余爱好者，所以对当前状态下代码的任何其他评论都会非常感激！）

谢谢！

http://www.jesserosenfield.com/900number/news.html

//Prev Click
$('.prevSingle').click( function() {
       // Cache the ancestor
    var $ancestor = $(this).parent().parent().parent();
       // Get the next .newsSingle
    var $prev = $ancestor.prev('.newsSingle');
       // If there wasn't a next one, go back to the first.
    if( $prev.length == 0 ) {
        $prev = $ancestor.nextAll('.newsSingle').last();;
    }

    //Get the height of the next element
    var thisHeight = $prev.attr('rel');

    //Hide the current element
    $ancestor.animate({
            paddingBottom:'0px',
            top:'48px',
            height: '491px'
        }, 300);

        //Get the next element and slide it in      
    $prev.animate({
            top:'539px',
            height: thisHeight,
            paddingBottom:'100px'
        }, 300);
});

//Next Click
$('.nextSingle').click( function() {
       // Cache the ancestor
    var $ancestor = $(this).parent().parent().parent();
       // Get the next .newsSingle
    var $next = $ancestor.next('.newsSingle');
       // If there wasn't a next one, go back to the first.
    if( $next.length == 0 ) {
        $next = $ancestor.prevAll('.newsSingle').last();;
    }

    //Get the height of the next element
    var thisHeight = $next.attr('rel');

    //Hide the current element
    $ancestor.animate({
            paddingBottom:'0px',
            top:'48px',
            height: '491px'
        }, 300);

        //Get the next element and slide it in      
    $next.animate({
            top:'539px',
            height: thisHeight,
            paddingBottom:'100px'
        }, 300);
});

在Firefox和Safari中平滑jQuery动画

0 个答案: