On mouse over change transition

[saiphani117]

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**

**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;
}

[Author]

Posts