为什么此 jQuery 幻灯片无法正常工作？

Question

我已将 jquery 幻灯片放映插入到我新创建的房地产 web 站点中。 我的房地产 web 网站在 php 的“Openrealty”平台上运行。

这是我的原始 jquery 代码的一部分。

if(!repeat)
$this.parent()
.find('li:nth-child('+current+')  a')
.stop(true,true)
.animate({'marginRight':'-20px'},300,function(){
$(this).animate({'opacity':'0.7'},700);
});

当我通过“Firebug”查看错误的来源时，它显示如下。

if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate(,300,function(){
$(this).animate(,700);
}); 

在这里您可以清楚地看到原始代码的某些部分没有被浏览器呈现。 如{'marginRight':'-20px'}

如萤火虫所示，错误从“.animate(,300,function(){ ”开始。

我需要找到一个解决方案，为什么这个 Jquery 在我的 web 站点中不起作用。

此 Jquery 幻灯片的来源： http://tympanus.net/codrops/2010/04/28/pretty-simple-content-slider-with-jquery-and-css3/

非常欢迎任何反馈...

感谢前 2 个答案和请求。 是的，我根据答案删除了所有样式中的所有 (') 标记。 但仍然发生与上述相同的错误......

Jquery 脚本共有三个部分。 1. 链接到http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js 2. 链接到名为 'jquery.easing.1.3.js' 的外部 JS 文件 3. 内联脚本 以下是内联 jquery：

<script type="text/javascript">
            $(function() {
                var current = 1;

                var iterate     = function(){
                    var i = parseInt(current+1);
                    var lis = $('#rotmenu').children('li').size();
                    if(i>lis) i = 1;
                    display($('#rotmenu li:nth-child('+i+')'));
                }
                display($('#rotmenu li:first'));
                var slidetime = setInterval(iterate,3000);

                $('#rotmenu li').bind('click',function(e){
                    clearTimeout(slidetime);
                    display($(this));
                    e.preventDefault();
                });

                function display(elem){
                    var $this   = elem;
                    var repeat  = false;
                    if(current == parseInt($this.index() + 1))
                        repeat = true;


                           /* slide in the current one */
                if(!repeat)
                  $this.parent()
                   .find('li:nth-child('+current+') a')
                   .stop(true,true)
                   .animate({marginRight:-20px},300,function(){
                   $(this).animate({opacity:0.7},700);
                });


                    current = parseInt($this.index() + 1);

                    var elem = $('a',$this);

                        elem.stop(true,true).animate({marginRight:0px,opacity:1.0},300);

                    var info_elem = elem.next();
                    $('#rot1 .heading').animate({left:-420px}, 500,'easeOutCirc',function(){
                        $('h1',$(this)).html(info_elem.find('.info_heading').html());
                        $(this).animate({left:0px},400,'easeInOutQuad');
                    });

                    $('#rot1 .description').animate({bottom:-270px},500,'easeOutCirc',function(){
                        $('p',$(this)).html(info_elem.find('.info_description').html());
                        $(this).animate({bottom:0px},400,'easeInOutQuad');
                    })
                    $('#rot1').prepend(
                    $('<img/>',{
                        style   :   'opacity:0',
                        className : 'bg'
                    }).load(
                    function(){
                        $(this).animate({opacity:1},600);
                        $('#rot1 img:first').next().animate({opacity:0},700,function(){
                            $(this).remove();
                        });
                    }
                ).attr('src','slide-images/'+info_elem.find('.info_image').html()).attr('width','950').attr('height','300')
                );
                }
            });
        </script>

以下是展示幻灯片的 html 部分。

<div id="sliderbox">

            <div class="rotator">
                <ul id="rotmenu">
                    <li>
                        <a href="rot1">Luxury Life</a>
                        <div style="display:none;">
                            <div class="info_image">1.jpg</div>
                            <div class="info_heading">Best Homes for you</div>
                            <div class="info_description">
                 This is description... 
                                <a href="#" class="more">Read more</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="rot2">Smiling Faces</a>
                        <div style="display:none;">
                            <div class="info_image">2.jpg</div>
                            <div class="info_heading">Do at our best</div>
                            <div class="info_description">
                 This is description... 

                                <a href="#" class="more">Read more</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="rot3">Tradition</a>
                        <div style="display:none;">
                            <div class="info_image">3.jpg</div>
                            <div class="info_heading">We goes with tradition</div>
                            <div class="info_description">
                 This is description... 

                                <a href="#" class="more">Read more</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="rot4">Lands for sale</a>
                        <div style="display:none;">
                            <div class="info_image">4.jpg</div>
                            <div class="info_heading">A best place to live in Kandy</div>
                            <div class="info_description">
                 This is description... 

                                <a href="#" class="more">Read more</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="rot5">True Nature</a>
                        <div style="display:none;">
                            <div class="info_image">5.jpg</div>
                            <div class="info_heading">Brings you beauty in nature</div>
                            <div class="info_description">
                               This is description... 
                                <a href="#" class="more">Read more</a>
                            </div>
                        </div>
                    </li>
                </ul>
                <div id="rot1">
                    <img src="" width="950" height="300" class="bg" alt=""/>
                    <div class="heading">
                        <h1></h1>
                    </div>
                    <div class="description">
                        <p></p>

                    </div>    
                </div>
            </div>
        </div>

以下是 CSS：

.rotator{
    background-color:#222;
    width:950px;
    height:300px;
    margin:0px auto;
    position:relative;
    /*font-family:'Myriad Pro',Arial,Helvetica,sans-serif;*/
    font-family:Helvetica,sans-serif;
    color:#fff;
    text-transform:uppercase;
    /* letter-spacing:-1px; */
    letter-spacing:1px;
    border:3px solid #f0f0f0;
    overflow:hidden;
    -moz-box-shadow:0px 0px 10px #222;
    -webkit-box-shadow:0px 0px 10px #222;
    box-shadow:0px 0px 10px #222;
}
img.bg{
    position:absolute;
    top:0px;
    left:0px;
}
.rotator ul{
    list-style:none;
    position:absolute;
    right:0px;
    top:0px;
    margin-top:6px;
    z-index:999999;
}
.rotator ul li{
    display:block;
    float:left;
    clear:both;
    width:260px;
}
.rotator ul li a{
    width:230px;
    float:right;
    clear:both;
    padding-left:10px;
    text-decoration:none;
    display:block;
    height:30px;
    line-height:30px;
    background-color:#222;
    margin:1px -20px 1px 0px;
    /*opacity:0.7;*/
    color:#f0f0f0;
    font-size:12px;
    border:1px solid #000;
    border-right:none;
    outline:none;
/*
    text-shadow:-1px 1px 1px #000;
*/
    -moz-border-radius:10px 0px 0px 5px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-bottom-left-radius:10px;
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
}

/* .rotator ul li a:hover{
      text-shadow:0px 0px 2px #fff;
}
*/

.rotator .heading{
    position:absolute;
    top:0px;
    left:0px;
    width:500px;
}

.rotator .heading h1{
    text-shadow:-1px 1px 1px #555;
    font-weight:normal;
    font-size:36px;
    padding:20px;
}

.rotator .description{
    width:300px;
    height:15px;
    position:absolute;
    bottom:0px;
    left:0px;
    padding:5px;
    background-color:#222;
    -moz-border-radius:0px 10px 0px 0px;
    -webkit-border-top-right-radius:10px;
    border-top-right-radius:10px;
    /*opacity:0.7;*/
    border-top:1px solid #000;
    border-right:1px solid #000;
}

.rotator .description p{
    /*text-shadow:-1px 1px 1px #000;*/
    text-transform:none;
    letter-spacing:normal;
    line-height:10px;
    font-family:Helvetica,sans-serif;
    font-size:13px;
}

a.more{
    color:orange;
    text-decoration:none;
    text-transform:uppercase;
    font-size:10px;
}

a.more:hover{
    color:#fff;
}

我已经分析了这些脚本中的每一个，但没有发现任何问题......请告诉我如何解决这个问题。

Answer 1

在你的原始代码中试试这个。

if(!repeat)
$this.parent()
.find('li:nth-child('+current+')  a')
.stop(true,true)
.animate({marginRight:-20},300,function(){
$(this).animate({opacity:0.7},700);
});

Answer 2

您的 animate() function 的 CSS 属性似乎是错误的。

不使用 '（单引号字符）进行实验

if(!repeat)
$this.parent()
.find('li:nth-child('+current+')  a')
.stop(true,true)
.animate({marginRight:'-20px'},300,function(){
$(this).animate({opacity:0.7},700);
});

如jquery 网页中的 animate() 示例