Плавная анимация jQuery в Firefox против сафари - PullRequest
Новая
       17

Плавная анимация jQuery в Firefox против сафари

1 голос
/ 28 августа 2010

Мне нравится, как следующие анимации в Safari, но я ненавижу, как это происходит в Firefox (нажмите название события, затем нажмите «предыдущий пост» или «следующий пост» в нижней части страницы).Есть ли способ «сгладить» анимацию, как в Safari?

РЕДАКТИРОВАТЬ: В Firefox есть своего рода «вспышка белого»как два изображения пересекаются друг с другом.Это выглядит рывком, когда страница прокручивается вверх (из-за изменения высоты элементов).В сафари такой «вспышки» не происходит, и прокрутка в результате анимации намного плавнее (совсем не прерывисто) ... это лучший способ, которым я могу это описать.Надеюсь, что это поможет!

(я любитель 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);
});
...