jQueryスライドショーが正常に動作しないのはなぜですか？

Question

私はjqueryスライドショーを私の新たに作成された不動産ウェブサイトに挿入しました。 私の不動産ウェブサイトは、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、機能（）{」以降から始まる放火犯によって示されているように。

私はこのjQueryの私のウェブサイトで動作しない理由解決策を見つける必要があります。

このjQueryのスライドショーの

出典：すべてのフィードバックは非常に歓迎されるhttp://tympanus.net/codrops/2010/04/28/pretty-simple-content-slider-with-jquery-and-css3/

...最初の2つの答えと要求のための

おかげで はい私はすべての（ '）マークを削除しましたすべてのスタイリングの中で答えごとに。 でも、上記と同じエラーが発生します...

合計Jqueryスクリプトには3つの部分があります。続いて 'jquery.easing.1.3.js' 3.インラインスクリプトと呼ばれる外部のJSファイルへhttp://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js 2.リンクに 1.リンク はインライン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（）関数のCSSプロパティが間違っているようです。なし

実験元のPHPコード ''（一重引用符）アニメーションのように

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

（）の例from the jquery webpage