On mouse over change transition - css

Question

Here i am implementing an Image slider
My problem is when i hover my image slider i want to stop my css transition property.
I tried using addclass and removeclass but failed
Here is my code
HTML
<div id="container">
<img src="http://worksheetgenius.com/Next_button.jpg" width="106px;" id="right"/>
<img src="http://worksheetgenius.com/Previous_button.jpg" width="106px;" id="left"/>
<div id="slider">
<div id="slide1" class="slide transition">
<img src="http://s.cghub.com/files/Image/030001-031000/30883/37_max.jpg"/>
</div>
<div id="slide2" class="slide transition">
<img src="http://www.f-16.net/attachments/83_1093_207.jpg" />
</div>
<div id="slide3" class="slide transition">
<img src="http://www.sportbikes.net/forums/attachments/fz6/37654d1111746148-all-fz6-riders-show-us-your-bike-imag0005-edited-downscaled.jpg" />
</div>
<div id="slide4" class="slide transition">
<img src="http://3.bp.blogspot.com/-fpTz_1UegJM/TZ6eQWXTueI/AAAAAAAAASY/TsYJ5xZyixQ/s1600/banner_239.jpg" />
</div>
</div>
</div>
CSS
#slider
{
overflow:hidden;
height:363px;
position:absolute;
left:180px;
top:159px;
padding:0px;
margin:0px;
background: url("header_bg.jpg") repeat-x scroll 0 0 #FFFFFF;
width:1000px;
}
#slide1
{
position:absolute;
left:0px;
z-index:1;
}
.slide
{
position:absolute;
left:1000px;
}
.transition
{
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.notransition
{
-webkit-transition: none;
transition: none;
}
#right
{
position:absolute;
top: 287.5px;
right: 127px;
z-index: 99;
}
#left
{
position:absolute;
top: 287.5px;
left: 127px;
z-index: 99;
}
Script
var t=setInterval(function(){$("#right").click()},5000);
$(document).ready(function()
{
var present=1;
var next=2;
var total_slide=document.getElementById("slider").childElementCount;
$("#right").click(function()
{
present_slide="#slide"+present;
next_slide="#slide"+next;
$(present_slide).css("left","1000px");
$(next_slide).css("left","0px");
present++;
next++;
if(present==(total_slide+1))
{
present=1;
next=2;
for(i=1;i<=total_slide;i++)
{
$("#slide"+i).css("left","1000px");
}
$("#slide1").css("left","0px");
}
});
$("#left").click(function()
{
if(present==1)
{
next_slide="#slide"+total_slide;
present_slide="#slide"+present;
$(present_slide).css("left","1000px");
$(next_slide).css("left","0px");
present=total_slide;
next=1;
}else
{
next_slide="#slide"+(present-1);
present_slide="#slide"+present;
$(present_slide).css("left","1000px");
$(next_slide).css("left","0px");
present--;
next--;
}
if(next==0)
{
present=(total_slide-1);
next=total_slide;
}
});
$(".slide").on('mouseenter',function()
{ $(this).removeClass('transition').addClass('notransition');});
$(".slide").on('mouseleave',function()
{$(this).removeClass('notransition').addClass('transition');});
});
In the above provided code i used to classes transition and no transition.
I also tried with CSS as follows
.slide:hover
{
-webkit-transition: none;
transition: none;
}

Answer 1

I was doing a similar idea and I ended up using this cycle plugin for jquery Malsup Cycle. I then used this piece of code but you can find all of the options at the link above.
$(document).ready(function(){
$('#slider').cycle({
fx: 'scrollLeft',
speed: 1000,
timeout: 5000,
pause: 1
});
});
Setting the pause flag to one gets your desired functionality where it will stop animating on hover. I hope this helps!
HTML
<div id = "slider">
<div>
Slide 1
</div>
<div>
Slide 2
</div>
<div>
Slide 3
</div>
<div>
Slide 4
</div>
</div>
You just need to link to the plugin in the html and this should provide the desired functionality as I see it. You can put whatever content you want in the divs. I used a picture of our clients' logos with a short description as a banner on our company's page.
EDIT: I changed the selector to match the id that you used. HTML added.