Why doesn't this jQuery slideshow work properly? - php

Question

I have inserted jquery slide show in to my newly created real estate web site.
My real estate web site runs on 'Openrealty' platform which is php.
Here is a part of my Original jquery code.
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate({'marginRight':'-20px'},300,function(){
$(this).animate({'opacity':'0.7'},700);
});
When I look at where the error comes from through 'Firebug', it shows as follows.
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate(,300,function(){
$(this).animate(,700);
});
Here you can clearly see that some parts of the original code does not renders by the browser. Such as {'marginRight':'-20px'}
As shown by firebug the error begins from " .animate(,300,function(){ " onwards.
I need to find a solution why this Jquery not works in my web site.
Source of this Jquery slide show : http://tympanus.net/codrops/2010/04/28/pretty-simple-content-slider-with-jquery-and-css3/
Any feedback is highly welcomed...
Thanks for the first 2 answers and request.
Yes I removed all (') marks within all styling as per the answers.
But still the error occurs as same above...
Total Jquery script have three parts.
1. Link to http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
2. Link to outside JS file called 'jquery.easing.1.3.js'
3. Inline script
Following is the inline 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>
And following is the html part which shows the slide show.
<div id="sliderbox">
<div class="rotator">
<ul id="rotmenu">
<li>
Luxury Life
<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...
Read more
</div>
</div>
</li>
<li>
Smiling Faces
<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...
Read more
</div>
</div>
</li>
<li>
Tradition
<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...
Read more
</div>
</div>
</li>
<li>
Lands for sale
<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...
Read more
</div>
</div>
</li>
<li>
True Nature
<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...
Read more
</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>
and following is the 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;
}
I have analysed every of these scripts but couldn't identified any issues...
Please tell me how I can solve this.

Answer 1

Try this in you original code.
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

Your CSS properties for the animate() function seem wrong.
Experiment without the ' (single quote characters)
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate({marginRight:'-20px'},300,function(){
$(this).animate({opacity:0.7},700);
});
As in the animate() examples from the jquery webpage