开发者

Smooth jQuery animations in firefox vs safari

开发者 https://www.devze.com 2023-01-13 06:14 出处:网络
I love how the following animates in Safari, but hate how it does in firefox (click an event name, then click \"previous post\" or \"next post\" at the bottom of the page). Is there a way to \"smooth

I love how the following animates in Safari, but hate how it does in firefox (click an event name, then click "previous post" or "next post" at the bottom of the page). Is there a way to "smooth out" the animation like it does it in Safari?

EDIT: In firefox there is kind of a "flash of white" as the two images cross each other. It looks jerky as the page scrolls up (because of the height change of the elements). In safari, this "flash" doesn't happen, and the scrolling as a result of the animation is much smoother (not jerky at all)... that's the best way I can describe it. Hope that helps!


(i'm a jQuery amateur, so any other comments on the code in its current state would be much appreciated!)

thanks!

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'
        }, 30开发者_Python百科0);

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

精彩评论

暂无评论...
验证码 换一张
取 消