Script not working properly after Partial PostBack

Question

I have the following script in my WebUserControl page (Public.ascx), which is used to perform a slideshow by moving each slide one by one. It's working fine but the issue is I'm having UpdatePanel in my aspx Page so the script/Css not loading properly after Partial Postback.

<style type="text/css">
    .slideshow .slideshowWindow {
        width: 980px;
        height: 500px;
        margin: 0;
        padding: 0;
        position: relative;
        overflow: hidden;
    }

        .slideshow .slideshowWindow .slide {
            margin: 0;
            padding: 0;
            width: 980px;
            height: 500px;
            float: left;
            position: relative;
        }

    .placeholder {
        width: 980px;
        text-align: center;
    }
</style>
<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>

<script type="text/javascript">
    function pageLoad() {

        var currentPosition = 0;
        var slideWidth = 980;
        var slides = $('.slide');
        var numberOfSlides = slides.length;
        var slideShowInterval;
        var speed = 3000;


        slideShowInterval = setInterval(changePosition, speed);

        slides.wrapAll('<div id="slidesHolder"></div>')

        slides.css({ 'float': 'left' });
        $('#slidesHolder').css('width', slideWidth * numberOfSlides);


        function changePosition() {
            if (currentPosition == numberOfSlides - 1) {
                currentPosition = 0;
            } else {
                currentPosition++;
            }
            moveSlide();
        }


        function moveSlide() {
            $('#slidesHolder')
              .animate({ 'marginLeft': slideWidth * (-currentPosition) }, "slow");
        }
    }
</script>

I have referred the following links

Jquery Fancybox not working after postback

jQuery is not working after partial postback

I tried those methods. If I use above methods, the slide is not moving properly.

What I'm getting after the above method is

First slide -> third slide -> second -> first -> third -> fourth and so on.

What I need actually is

First slide -> second slide -> third slide -> fourth slide -> First slide

Answer 1

Blazemonger has given a solution regarding your problem

To optimize the whole thing a little more, you can eliminate the currentPosition variable and the moveSlide sub-function, and just use a callback in the .animate method:

function changePosition() {
    $('#slidesHolder').animate({
        'marginLeft': 0-slideWidth
    }, function() {
        $('#slidesHolder').css('marginLeft', 0)
            .children().first().appendTo('#slidesHolder');
    });
}

Source