CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ibanez
Ibanez

Reputation: 239

Is there a way to set a transition speed on mouse over?

Is there a CSS way or even a javascript way to set a transition speed when swapping images on mouse over? I haven't tried anything so there is no code to provide. I'm wondering if it can me done and an example. Thanks!

HTML

<ul id="navigation">
<li class="link1"><a href="index.html"></a></li>
<li class="link2"><a href="services.html"></a></li>
<li class="link3"><a href="contact.html"></a></li>
</ul>

CSS

li.link1 {
background-image: url(../images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
background-position: left top;
}
li.link1:hover {
background-image: url(../images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
background-position: left bottom;   
}

Upvotes: 0

Views: 2192

Answers (3)

Nemoy
Nemoy

Reputation: 3427

Use jQuery hover

Suppose you have an HTML structure like this:

<div id="element" style="position:relative;">
   <img src="image1.gif" id="img1" />
   <img src="image2.gif" id="img2" style="display:none" />
</div>

and css :

img {
  position:absolute;
  top:0;
  left:0;
}

jQuery code:

$("#element").hover(function() {
    //fadeout first image using jQuery fadeOut
    $("#img1").fadeOut(200);
    //fadein second image using jQuery fadeIn 
    $("#img2").fadeIn(200);
}, function () {
    //fadeout second image using jQuery fadeOut
    $("#img1").fadeIn(200);
    //fadein first image using jQuery fadeIn
    $("#img2").fadeOut(200);
});

check below link

http://api.jquery.com/hover/

http://api.jquery.com/fadeOut/

http://api.jquery.com/fadeIn/

Here is a fiddle for demo

Here is a fiddle using css3 and jQuery.hover as fallback for ie as mentioned by hustlerinc

Upvotes: 2

justanotherhobbyist
justanotherhobbyist

Reputation: 2190

You can do it with CSS3, here's the first result on Google:

http://www.w3schools.com/css3/css3_transitions.asp

Upvotes: 0

Kristian
Kristian

Reputation: 21830

yes there is. the first thing you have to specify though is how you're performing the swap.

if there are two layers on top of each other and you're transitioning opacity of them via CSS, then you'd set transition (-webkit, -moz, -o, etc) opacity 1s; where 1s refers to the number in seconds.

if you're doing the transitions via jquery, or another javascript framework, then your animation functions will have an additional available parameter for a speed in milliseconds, like .animate( {properties xyz}, 200 );

Upvotes: 0

Related Questions