javascript - 为什么当我使用 jQuery 为框设置动画时 CSS3 框阴影分离？

Question

我有一个带有盒子阴影的图像，但是当我为它设置动画时，盒子阴影似乎有了自己的生命，如下所示：

例子

它在 chrome、firefox 和 IE 中以相同的方式发生。我很困惑，更重要的是不知道如何修复它，让它看起来很漂亮。

感谢您提供有关解决此问题或发生此问题的任何想法或答案。

html/js:

            <div id="sliderPane">
                <div id="slider0" class="slider"><img src="1.jpg"/></div>
                <div id="slider1" class="slider"><img src="2.jpg"/></div>
                <div id="slider2" class="slider"><img src="3.jpg"/></div>
                <div id="numSliders">3</div>
            </div>
            <script type="text/javascript">

                var numsliders;
                var currentSlider = 0;
                var interval;
                var slideWidth;

                $('#slider0').css('opacity',1);
                $(document).ready(function(){
                    numsliders = parseInt( $('#numSliders').html() );
                    $('#slider0').css('left', '62px');
                    $('#slider0').css('height', '200px');
                    $('#slider0').css('width', '200px');
                    $('#slider0').css('top', '20px');
                    $('#slider0').css('opacity', '1');
                    slideWidth = $('#slider0').width();
                });

                interval = window.setInterval(nextSlider, 5000);

                function nextSlider() {
                    specificSlider((currentSlider + 1)%numsliders);
                }

                function specificSlider(sliderNumber){
                    //alert('oldslide: ' + currentSlider + " new sloide: " + sliderNumber);
                    window.clearInterval(interval);
                    // move the next slider on deck
                    $('#slider' + sliderNumber).css('left', $('#sliderPane').css('width'));
                    $('#slider' + sliderNumber).css('top', '70px');
                    $('#slider' + sliderNumber).css('hieght', '100px');
                    $('#slider' + sliderNumber).css('width', '100px');
                    //alert('lol');
                    // move old slide off, 
                    $('#slider' + currentSlider).animate({
                     left: '-80px',
                     top: '50px',
                     hieght: '100px',
                     width: '100px',
                     opacity: 0
                    },900,null);
                    // new slide on
                    $('#slider' + sliderNumber).animate({
                     left: ($('#sliderPane').width() / 2 - slideWidth / 2) + 'px',
                     height: '200px',
                     width: '200px',
                     top: '20px',
                     opacity: 1
                    },900,null);

                    currentSlider = sliderNumber;

                    interval = window.setInterval(nextSlider, 5000);
                }

            </script>

CSS：

#sliderPane{
    height: 200px;
    position: relative;
    overflow: hidden;
    background-image: url('sliderBG.png');
    background-size: 100% 100%;
    padding: 20px 0;
}

.slider{
    position: absolute;
    opacity: 0;
    top: -300px;
    box-shadow: 2px 2px 10px 5px rgba(0,0,0,.4);
}

#numSliders{
    visibility: hidden;
}

Answer 1

为了让您接受答案：

        <div id="sliderPane">
            <div id="slider0" class="slider"><img src="1.jpg"/></div>
            <div id="slider1" class="slider"><img src="2.jpg"/></div>
            <div id="slider2" class="slider"><img src="3.jpg"/></div>
            <div id="numSliders">3</div>
        </div>
        <script type="text/javascript">

            var numsliders;
            var currentSlider = 0;
            var interval;
            var slideWidth;

            $('#slider0').css('opacity',1);
            $(document).ready(function(){
                numsliders = parseInt( $('#numSliders').html() );
                $('#slider0').css('left', '62px');
                $('#slider0').css('height', '200px');
                $('#slider0').css('width', '200px');
                $('#slider0').css('top', '20px');
                $('#slider0').css('opacity', '1');
                slideWidth = $('#slider0').width();
            });

            interval = window.setInterval(nextSlider, 5000);

            function nextSlider() {
                specificSlider((currentSlider + 1)%numsliders);
            }

            function specificSlider(sliderNumber){
                //alert('oldslide: ' + currentSlider + " new sloide: " + sliderNumber);
                window.clearInterval(interval);
                // move the next slider on deck
                $('#slider' + sliderNumber).css('left', $('#sliderPane').css('width'));
                $('#slider' + sliderNumber).css('top', '70px');
                $('#slider' + sliderNumber).css('height', '100px');
                $('#slider' + sliderNumber).css('width', '100px');
                //alert('lol');
                // move old slide off, 
                $('#slider' + currentSlider).animate({
                 left: '-80px',
                 top: '50px',
                 height: '100px',
                 width: '100px',
                 opacity: 0
                },900,null);
                // new slide on
                $('#slider' + sliderNumber).animate({
                 left: ($('#sliderPane').width() / 2 - slideWidth / 2) + 'px',
                 height: '200px',
                 width: '200px',
                 top: '20px',
                 opacity: 1
                },900,null);

                currentSlider = sliderNumber;

                interval = window.setInterval(nextSlider, 5000);
            }

        </script>