ugrás a tartalomhoz

Jquerry animate

cszlak · 2013. Aug. 31. (Szo), 08.36
Szeretném három ikonomat, animáválva lecserélni másikra, hover-ként.

 #icon .facebook, #icon .facebook_hover{
	margin-left:740px;
	float:left;
	width:35px;
	height:35px;
	 }
 #icon .skype, #icon .youtoube ,
	#icon .skype:hover, #icon .youtoube:hover{
	margin-left:-5px;
	float:left;
	width:35px;
	height:35px;
		}



<div id="icon">
<a href="#" title="Facebook"  id="exchange"> 
<div class="facebook" ><img src="images/icon_facebook.png" width="37"></div></a>
<a href="#" title="Skype">     <div class="skype"><img src="images/icon_skype.png" width="37"></div></a>
<a href="#" title="Youtube">   <div class="youtoube"><img src="images/icon_youtube.png" width="37"></div></a>
</div>  


<script type="text/javascript">
$("#facebook").hover(function(){
    $(this).stop(true, true).animate({ 'background-image' :'url("images/icon_facebook.png")' });
}, function() {
    $(this).stop(true, true).animate({ 'background-image' :'url("images/icon_facebook_hover.png")'});
});
</script>
‹ Hogyan érdemes js-ben buildelni Javascript aszinkron iteráció ›
 ■
1

Hol a probléma? Miért nem

hunkris · 2013. Aug. 31. (Szo), 12.10
Hol a probléma?
Miért nem css-sel csinálod?
2

css?

cszlak · 2013. Aug. 31. (Szo), 12.28
Effect kellene hozzá valami fade, vagy hasonló, azt hogyan lehet css-el, úgy hogy az IE nem ismeri a hover bacground cserét????????
3

animate

Poetro · 2013. Aug. 31. (Szo), 12.48
Animate-tel csak számszerű értékeket lehet animálni. Ezért valami mást kell tenned. Például megoldod CSS-sel.
<a class="facebook icon" href="#facebook">Facebook</a>
.icon {
  color: transparent;
  font-size: 0;
  width: 48px;
  height: 48px;
  background: url(http://freebiesbug.com/wp-content/uploads/2012/12/dark_social_icons_free_psd.jpg) -150px -102px no-repeat;
  display: block;
  position: relative;
}
.icon:after {
  width: 48px;
  height: 48px;
  background: url(http://freebiesbug.com/wp-content/uploads/2012/12/dark_social_icons_free_psd.jpg) -150px -37px no-repeat;
  display: block;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  opacity: 0;  
  -webkit-transition: opacity .2s;
  -moz-transition: opacity .2s;
  -ms-transition: opacity .2s;
  transition: opacity .2s;
}
.icon:hover:after {
  opacity: 1;
}
Próba.
Ha meg nem animálódik IE alatt szerintem nem a világ vége. De a fentit meg tudod valósítani jQuery-vel is.
4

Köszönöm

cszlak · 2013. Aug. 31. (Szo), 19.02
Köszönöm, ilyesmire gondoltam.
ÉS a jó tanácsokat is.
5

Lehet még egy kérdésem?

cszlak · 2013. Aug. 31. (Szo), 20.07
Ez miért nem működik ebben az esetben?

input[type="submit"]{
	 width:75px;
	 height:28px;
	 border:0px #000000;
	 padding:0px;
	 margin:10px 0px 0px 0px;
	 background:url(../images/TOVABB.png) no-repeat;
	 display: block;  
     position: relative;  
	}

input[type="submit"]:after {
	 width:75px;
	 height:28px;
	 border:0px #000000;
	 padding:0px;
	 margin:10px 0px 0px 0px;
	 
	 background:url(../images/TOVABB1.png) no-repeat;
	 display: block;  
  position: absolute;  
  content: "";  
  top: 0;  
  left: 0;  
  opacity: 0;    
  -webkit-transition: opacity .9s;  
  -moz-transition: opacity .9s;  
  -ms-transition: opacity .9s;  
  transition: opacity .9s;  
	}

input[type="submit"]:hover:after {  
  opacity: 1;  
} 



<input name="mail_submit2" type="submit" onclick="formSubmit()" class="button_tavabb"  value=""
8

input

Poetro · 2013. Aug. 31. (Szo), 20.53
Egyes böngészők nem engedik az after / before pszeudó kijelölő használatát input elem esetén.
9

Igen, köszönöm

cszlak · 2013. Szep. 1. (V), 09.42
Utánna olvastam, köszönöm.
6

Tárhelyen már nem működik!

cszlak · 2013. Aug. 31. (Szo), 20.25
Valamit elrontottam??? (Chrome-ban néztem)

#icon{
	width:850px;
	height:40px;
	margin:10px 0px 0px 0px;
	float:left;
	}
 #icon .facebook,  #icon .skype, #icon .youtoube{
	float:left;
	width:35px;
	height:35px;
	display: block;
	font-size: 0; 
	color: transparent;  
	position:absolute;
	 }
	#icon .facebook{margin-left:750px;	}
	#icon .skype{margin-left:780px;}
	#icon .youtoube{margin-left:810px;}


 #icon .facebook{
	background:url(../images/icon_facebook.png) no-repeat;
	}
	
#icon .facebook:after{
	background:url(../images/icon_facebook_hover.png) no-repeat;
}
	
	 #icon .skype{
		background:url(../images/icon_skype.png) no-repeat;
	}
	
	#icon .skype:after{
	background:url(../images/icon_skype_hover.png) no-repeat;
	}
	
	 #icon .youtoube{
	background:url(../images/icon_youtube.png) no-repeat;
	}
	
	#icon .youtoube:after{
	background:url(../images/icon_youtube_hover.png) no-repeat;
	}
	
	 #icon .facebook:after,
	 #icon .skype:after,
	 #icon .youtoube:after 
	{
    display: block;  
   position: absolute;
   font-size: 0; 
   color: transparent;    
   content: "";  
   top: 0;  
   left: 0;  
   opacity: 0;    
   -webkit-transition: opacity .5s;  
   -moz-transition: opacity .5s;  
   -ms-transition: opacity .5s;  
   transition: opacity .5s; 
   width: 48px;  
   height: 48px;   
	}
	#icon .facebook:hover:after,
	 #icon .skype:hover:after,
	 #icon .youtoube:hover:after
	 {  
  opacity: 1;  
} 	



<div id="icon">
<a href="#" title="Facebook" class="facebook icon"></a> 
<a href="#" title="Skype" class="skype"></a>
<a href="#" title="Youtube" class="youtoube"></a>
</div>
7

IE -ben meg tökéletesen animál!!

cszlak · 2013. Aug. 31. (Szo), 20.34
IE -ben meg tökéletesen animál!!
Mozzilában is tökéletes!!
Akkor most mi van??
Csak a Chrome nem jó!!

Mit rontottam el??