css - On mouse over change transition -

here implementing image slider

my problem when hover image slider want stop css transition property. tried using addclass , removeclass failed here 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"> <a href="#" title="view first image link"><img src="http://s.cghub.com/files/image/030001-031000/30883/37_max.jpg"/></a> </div>  <div id="slide2" class="slide transition"> <a href="#" title="view second image link"><img src="http://www.f-16.net/attachments/83_1093_207.jpg" /></a> </div>  <div id="slide3" class="slide transition"> <a href="#" title="view first image link"><img src="http://www.sportbikes.net/forums/attachments/fz6/37654d1111746148-all-fz6-riders-show-us-your-bike-imag0005-edited-downscaled.jpg" /></a> </div>  <div id="slide4" class="slide transition">           <a href="#" title="view third image link"><img src="http://3.bp.blogspot.com/-fptz_1uegjm/tz6eqwxtuei/aaaaaaaaasy/tsyj5xzyixq/s1600/banner_239.jpg" /></a> </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: 0.3s; transition: 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 above provided code used classes transition , no transition.

tried css follows

.slide:hover { -webkit-transition: none;     transition: none; } 

i doing similar idea , ended using cycle plugin jquery malsup cycle. used piece of code can find of options @ link above.

$(document).ready(function(){     $('#slider').cycle({              fx:      'scrollleft',              speed:      1000,              timeout:    5000,             pause:      1                            });     }); 

setting pause flag 1 gets desired functionality stop animating on hover. hope helps!

html

<div id = "slider">     <div>         slide 1     </div>     <div>         slide 2     </div>     <div>         slide 3     </div>     <div>         slide 4     </div> </div> 

you need link plugin in html , should provide desired functionality see it. can put whatever content want in divs. used picture of our clients' logos short description banner on our company's page.

edit: changed selector match id used. html added.