javascript-页面加载时位置设置不正确

Question

I am creating a coverflow plugin but I have a slight problem when it first loads.

The size/styles of the images is set based on their position in the coverflow. When the page first loads the images all resize properly but they do not reposition themselves. If I them use the left and right navigation they work correctly.

I am not sure what is causing this. I thought it might be something to do with the variable that sets the starting position of the coverflow...

Here's my code:

    <script type="text/javascript" src="/scripts/jquery-ui.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            var coverflowPos = Math.round($('#coverflow img').length / 2)

            $('#coverflow img').each( function(i) {
                $(this).css({'opacity' : 1-(Math.abs(coverflowPos-i)*0.4), 'z-index' : 100-(Math.abs(coverflowPos-i)) }).width(200-(Math.abs(coverflowPos-i)*50)).height(128-(Math.abs(coverflowPos-i)*50));
            });

// If I run the testme() function here, it animates to the right place but I want it to start in this position rather than animate to it

            $('#moveLeft').click( function() {
                if(coverflowPos > 1) {
                    coverflowPos = coverflowPos-1
                }
                testme();
            });

            $('#moveRight').click( function() {
                if(coverflowPos < $("#coverflow img").length -1) {
                    coverflowPos = coverflowPos+1
                }
                testme();
            });

            function testme() {
                $('#coverflow img').each( function(i) {
                    $(this).animate({
                        opacity: 1-(Math.abs(coverflowPos-i)*0.4),
                        width: 200-(Math.abs(coverflowPos-i)*50),
                        height: 128-(Math.abs(coverflowPos-i)*50)
                    }, {
                        duration: 500,
                        easing: 'easeInOutSine'
                    }).css({ 'z-index' : 100-(Math.abs(coverflowPos-i)) });
                });

            };

        });

    </script>

And here's a link to a jsfiddle:

http://jsfiddle.net/r8NqP/4/

Answer 1

Calling testme() at the end of the ready() function moves them into place. It does ease them in though, which looks a bit odd, could get rid of the ease in testme() by adding a doease parameter.

Answer 2

Check you fist each :

'z-index' : 100-(Math.abs(coverflowPos-i)) }).width(200-(Math.abs(coverflowPos-i)*50)).height(128-(Math.abs(coverflowPos-i)*50));

I think U mean:

'z-index' : 100-(Math.abs(coverflowPos-i)),
'width' : 200-(Math.abs(coverflowPos-i)*50),
'height': 128-(Math.abs(coverflowPos-i)*50)

Linke In your testme() function ?!

After that, you can also add a "Hack", by executing testme(true); at the end of script. And add, in your testme() function , a test parameter to set the duration at 0 or simply disable animate and replace by CSS().

But, it just a Hack.

Answer 3

200-(Math.abs(coverflowPos-i)*50) may be less than 0 -- eg,

200-(5-0)* 50= 200 - 250 = -50

And the negative width ends up not being applied, leaving the width at its original 200px value. The opacity gets set properly, so all you get is a huge blank space where the image is.

var width = 200-(Math.abs(coverflowPos-i)*50);
if ( width < 0 ) width = 0;

covers the init nicely.

I haven't bothered to check why it's okay once it's animated -- my guess is, that the images were already small, so it's not as noticeable.

Answer 4

The problem came from "Each index", that not correctly used to compute the Width and Height of the first image.

Try this :

 $('#coverflow img').each( function(i) {
    i++;
    $(this).css({...

And remove the Blank.gif...

Here, you find my fork fiddle : http://jsfiddle.net/akarun/FQWQa/